@media screen and (min-width: 481px) {
    /* PC用 */
    html {
        -webkit-text-size-adjust: 100%;
    }

    /* hide pc display items */
    .smartphone_display{
        display:none;
    }

    /* ---------- */
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,input,p,blockquote,th,td {
        margin:0;
        padding:0;
        font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', osaka, sans-serif;
        
        color: #222222;
        line-height: 1.5em;
        font-size:15px;
        }
        
    pre {
    margin: 1em 0; /* ブロック前後の余白 */
    padding: 1em; /* ブロック内の余白 */
    border-radius: 5px; /* 角丸 */
    background: #000000; /* 背景色 */
    color: #fff; /* 文字色 */
    font-size:14px;
    overflow:scroll
    }

    code{
    overflow-x:scroll;
    }
        
    body {
        min-width: 960px;
        _display: inline;
        _zoom:1;
    }

    table {
        border-collapse:collapse;
        border-spacing:0;
        }
    fieldset,img {
        border:0;
        margin: 2px;
        }
    address,caption,cite,code,dfn,em,strong,th,var {
        font-style:normal;
        font-weight:normal;
        }
    caption,th {
        text-align:left;
        }
    h1 {
        font-size:22px;
        font-weight:normal;
        }
    h2 {
        font-size:18px;
        font-weight:normal;
        }
    h3,h5,h6 {
        font-size:16px;
        font-weight:normal;
        }
    h4 {
        font-size:22px;
        font-weight:normal;
        }
    q:before,q:after {
        c ontent:'';
        }
    strong {
        font-weight:bold;
    }

    /* ---------- */
    body {
        text-align: center;
        min-width: 960px;
        /*background: #FFFFFF url("http://toshi.life.coocan.jp/shareware/images/sitebase/top_bar.gif") left top repeat-x; */
        }
    #container {
        position: relative;
        margin: 0 auto;
        width: 960px;
        text-align: left;
        }
    #banner {
        width: 960px;
        position: relative; 
        }
    #banner-header {
        margin: 0;
        line-height: 100%;
        background-color:#DDDDDD;
        }
    #pagebody {
        }

    #alpha {
        margin: 0;
        padding: 10px 0 0 0;
        width: 180px;
        float: left;
        }
    #beta {
        margin: 0 15px 0 10px;
        padding: 0 0 30px 0;
        width: 750px;
        float: left;
        font-size:12px;
        }
    #gamma {
        margin: 0;
        width: 200px;
        float: right;
        }
    #advt {
        margin: 0 0 0 0;
        padding: 0 0 10px 0;
        width: 150px;
        float: right;
        }
    #clsCode
        {
            font-size:14px;
            font-family:'courier new',courier,serif;
            background:#EEEEEE;
            padding: 10px 15px 10px 25px;
            margin-bottom: 1em;
            margin-left:20px;
            margin-right:20px;
        }
    .orangeBack
        {
            font-size:16px;
            background:#FFEECC;
            padding: 0px 0px 0px 0px; /* top right bottom left */
            margin-left:0px;
            margin-right:0px;
            margin-top:10px;
            margin-bottom: 10px;
        }
        
    .indent10
        {
            font-size:16px;
            /*background:#FFEECC;*/
            padding: 0px 10px 0px 10px; /* top right bottom left */
            margin-left:10px;
            margin-right:10px;
            margin-top:2px;
            margin-bottom: 2px;
        }
    .indent10_narrow
        {
            font-size:16px;
            /*background:#FFEECC;*/
            padding: 0px 10px 0px 10px; /* top right bottom left */
            margin-left:10px;
            margin-right:10px;
            margin-top:0px;
            margin-bottom: 0px;
        }
    .indent10_half
        {
            font-size:16px;
            /*background:#FFEECC;*/
            width: 300px;
            padding: 0px 0px 0px 0px; /* top right bottom left */
            margin-left:10px;
            margin-right:8px;
            margin-top:0px;
            margin-bottom: 0px;
            float: left;
        }

    /* ---------- */
    #head-ad {
        margin: 4px 0 7px 0;
        padding: 0;
        text-align: center;
        line-height: 100%;
        height: 30px;
        }
    h1#banner-header {
        line-height: 1em;
        }
    h4#banner-header {
        line-height: 1em;
        }

    /* ---------- */
    a img {
        border: 0;
        margin: 2px;

        }
    a:link {
        text-decoration: underline;
        color: #0068B7;
    }
    a:visited {
        text-decoration: underline;
        color: #0068B7;
    }
    a:hover {
        text-decoration: underline;
        color: #A40000;
    }
    a:active {
        text-decoration: underline;
        color: #0068B7;
    }
    h1 {
        margin: 0.5em 0 0 0;
        padding: 2px;
        color: #0068B7;
        font-weight: bold;
        /*border-bottom: #0068B7 4px solid;*/
        clear: both;
        }
    h2 {
        margin: 1em 0 0 0;
        padding: 2px;
        color: #0068B7;
        font-weight: bold;
        border-bottom: #0068B7 2px solid;
        clear: both;
        }
    h3 {
        margin: 1em 0 0 0;
        padding: 2px;
        color: #313131;
        font-weight: bold;
        border-bottom: 1px solid #959595;
        clear: both;
        }
    h4 {
        margin: 0.5em 0 0 0;
        padding: 2px;
        color: #0068B7;
        font-weight: bold;
        border-bottom: #0068B7 4px solid;
        clear: both;
        }
    p {
        margin: 0 1em 0 1em;
        padding: 0.4em 0;
        }
    #beta ul,
    #beta ol {
        margin: 0.5em 1em;
        padding: 0.5em 1em;
        }
    #beta li {
        padding: 0.2em 0 0.2em 0;
        line-height: 1.4em;
        }
    #beta dl {
        }
    #beta dl dt {
        border-left: 3px solid #CCCC00;
        padding: 0 0 0 5px;
        font-weight: bold;
        }
    #beta dl dd {
        margin: 0 0 1em 1em;
        }
        
    #beta li {
        /*padding: 0.2em 0 0.2em 0;
        line-height: 1.4em;
        float: left;*/
        display: inline;
        /*line-height: 1.5em;
        margin:0 0 0.3em 0;
        padding:0 0.3em 0 0.3em;
        border-right: 1px solid #ADADAD;*/
        list-style-type: none;
        }

    h5 {
        margin: 10px 0;
        padding: 0;
        font-size: 1px;
        font-weight: bold;
        clear: both;
        }

    fieldset {
        margin: 0.5em 0 0 0;
        padding: 0.7em 1.4em;
        border: 1px Solid #80C269;
        }
    legend {
        color: #0068B7;
    }

    /* ---------- */
    #alpha ul,
    #gamma ul {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 12px;
        }
    #alpha ul li,
    #gamma ul li {
        display: inline;
        padding: 0;
        margin: 0;
        font-size: 12px;
        }
    #alpha ul li a,
    #gamma ul li a {
        display: block;
        padding: 1px 0;
        text-decoration: none;
        border-bottom: 1px solid #CCCCCC;
        font-size: 14px;
        font-size: 12px;
        }
    #alpha ul li a:hover,
    #gamma ul li a:hover {
        background: #F6EBE0; 
        font-size: 12px;
        }
    #alpha ul li ul
    #gamma ul li ul {
        border-bottom: 0;
        font-size: 12px;
        }
    #alpha ul li ul li a,
    #gamma ul li ul li a {
        padding: 1px 0 1px 15px;
        border-bottom: 1px solid #CCCCCC;
        font-size: 12px;
        }
    #alpha ul li ul li a:hover,
    #gamma ul li ul li a:hover {
        background: #F6EBE0; 
        font-size: 12px;
        }
    #alpha ul li ul li ul,
    #gamma ul li ul li ul {
        border-bottom: 0;
        font-size: 12px;
        }
    #alpha ul li ul li ul li a,
    #gamma ul li ul li ul li a {
        padding: 1px 0 1px 30px;
        border-bottom: 1px solid #CCCCCC;
        font-size: 12px;
        }
    #alpha ul li ul li ul li a:hover,
    #gamma ul li ul li ul li a:hover {
        background: #F6EBE0; 
        font-size: 12px;
        }

    /* ---------- */
    #footer {
        clear: both;
        width: 960px;
        padding: 5px 0 5px 0;
        border-top: #0068B7 2px solid;
        }
    #footer #footer-inner address {
        text-align: center;
        font-style: normal;
        }

    /* Bread Crums */
    .breadcrumbs {
        width: 740px;
        background:#DDDDDD;
        margin: 4px auto 0;
    }
    
    .breadcrumbs ul,
    .breadcrumbs ol {
        display: table;
        font-size: 15px;
        width: 100%;
    }
    
    .breadcrumbs ul li,
    .breadcrumbs ol li {
        margin: 0 10px 0 0;
        font-size: 15px;
        /*float: left;*/
    }
    
    .breadcrumbs ul li:first-child::before,
    .breadcrumbs ol li:first-child::before {
        padding: 0 1px 0 0;
        content: "";
        font-size: 15px;
    }
    
    .breadcrumbs ul li::before,
    .breadcrumbs ol li::before {
        padding: 0 10px 0 0;
        content: ">";
        font-size: 15px;
    }

    /* youtube */
    .movie-wrap {
        position: relative;
        padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
        height: 0;
        overflow: hidden;
    }
    
    .movie-wrap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    audio { width: 60%; }

    video { width: 100%; }

}

@media only screen and (max-width: 480px) {
    /* スマホ用 */
    html {
        -webkit-text-size-adjust: 100%;
    }

    /* hide pc display items */
    .pc_display{
        display:none;
    }

    .half_sized_img{
        max-width : 50% ;
        height : auto ;	
    }

    /* ---------- */
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,input,p,blockquote,th,td {
        margin:0;
        padding:0;
        font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN','ＭＳ Ｐゴシック', 'MS PGothic', 'メイリオ', 'Meiryo',  'sans-serif';
        /*font-family: 'メイリオ', 'Osaka', 'ＭＳ Ｐゴシック', 'sans-serif';*/
        /*font-family:  "ＭＳ Ｐゴシック", "Osaka", "メイリオ","ヒラギノ角ゴ Pro W3";*/
        color: #222222;
        line-height: 1.5em;
        font-size:16px;
        }

    pre {
    margin: 1em 0; /* ブロック前後の余白 */
    padding: 1em; /* ブロック内の余白 */
    border-radius: 5px; /* 角丸 */
    background: #000000; /* 背景色 */
    color: #fff; /* 文字色 */
    font-size:14px;
    overflow:scroll
    }

    img {
        max-width : 100% ;
        height : auto ;
        }

    table {
        border-collapse:collapse;
        border-spacing:0;
        font-size:16px;
        margin-left:8px;
        margin-right:8px;
        margin-top:2px;
        margin-bottom: 2px;
        }
    fieldset,img {
        border:0;
        margin: 1px;
        }
    address,caption,cite,code,dfn,em,strong,th,var {
        font-style:normal;
        font-weight:normal;
        }
    caption,th {
        text-align:left;
        }
    h1 {
        font-size:18px;
        font-weight:normal;
        }
    h2 {
        font-size:18px;
        font-weight:normal;
        }
    h3,h5,h6 {
        font-size:16px;
        font-weight:normal;
        }
    h4 {
        font-size:18px;
        font-weight:normal;
        }
    q:before,q:after {
        c ontent:'';
        }
    strong {
        font-weight:bold;
    }

    /* ---------- */
    body {
        text-align: center;
        min-width: 100%;
        /*background: #FFFFFF url("http://toshi.life.coocan.jp/shareware/images/sitebase/top_bar.gif") left top repeat-x; */
        }
    #container {
        position: relative;
        margin: 0 auto;
        width: 100%;
        text-align: left;
        }
    #banner {
        width: 100%;
        position: relative; 
        }
    #banner-header {
        margin: 0;
        line-height: 100%;
        }
    #pagebody {
        }

    #alpha {
        /*margin: 0;
        padding: 0 0 10px 0;
        width: 180px;
        float: left;*/
        display:none;
        }
    #beta {
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        width: 100%;
        float: left;
        }
    #gamma {
        margin: 0;
        width: 98%;
        float: right;
        }
    #advt {
        margin: 0 0 0 0;
        padding: 0 0 10px 0;
        width: 98%;
        float: right;
        }
    #clsCode
        {
            font-size:14px;
            font-family:'courier new',courier,serif;
            background:#EEEEEE;
            padding: 10px 15px 10px 25px;
            margin-bottom: 1em;
            margin-left:20px;
            margin-right:20px;
        }
    .orangeBack
        {
            font-size:16px;
            background:#FFEECC;
            padding: 0px 0px 0px 0px; /* top right bottom left */
            margin-left:8px;
            margin-right:8px;
            margin-top:2px;
            margin-bottom: 2px;
        }
        
    .indent10
        {
            font-size:16px;
            /*background:#FFEECC;*/
            padding: 0px 2px 0px 2px; /* top right bottom left */
            margin-left:2px;
            margin-right:2px;
            margin-top:2px;
            margin-bottom: 2px;
        }
    .indent10_half
        {
            font-size:16px;
            /*background:#FFEECC;*/
            width: 100%;
            padding: 0px 0px 0px 0px; /* top right bottom left */
            margin-left:2px;
            margin-right:2px;
            margin-top:0px;
            margin-bottom: 0px;
            float: left;
        }

    /* ---------- */
    #head-ad {
        margin: 4px 0 7px 0;
        padding: 0;
        text-align: center;
        line-height: 100%;
        height: auto;
        }
    h1#banner-header {
        line-height: 1em;
        }
    h4#banner-header {
        line-height: 1em;
        }

    /* ---------- */
    a img {
        border: 0;
        margin: 2px;
        }
    a:link {
        text-decoration: underline;
        color: #0068B7;
    }
    a:visited {
        text-decoration: underline;
        color: #0068B7;
    }
    a:hover {
        text-decoration: underline;
        color: #A40000;
    }
    a:active {
        text-decoration: underline;
        color: #0068B7;
    }
    h1 {
        margin: 0.5em 0 0 0;
        padding: 2px;
        color: #0068B7;
        font-weight: bold;
        /*border-bottom: #0068B7 4px solid;*/
        clear: both;
        }
    /*
    h2 {
        margin: 1em 4px 0 4px;
        padding: 2px;
        color: #0068B7;
        font-weight: bold;
        border-bottom: #0068B7 2px solid;
        clear: both;
        }
        */
    h2 {
        font-size: 18px;
        font-weight: bold;
        /*color: #0068B7;*/
        color:#101010;
        /*border: 1px solid #0068B5;*/
        border: 2px solid #404040;
        background: #E8E8E8;
        padding: 2px 6px 2px 6px;
        margin: 10px 2px 0 2px;
        clear: both;
        border-radius: 3px; 
    }

    h3 {
        margin: 1.5em 8px 0 8px;
        padding: 2px;
        color: #313131;
        font-weight: bold;
        border-bottom: 2px solid #959595;
        clear: both;
        font-size: 16px;
        }


    h4 {
        margin: 0.5em 0 0 0;
        padding: 2px;
        color: #0068B7;
        font-weight: bold;
        border-bottom: #0068B7 6px solid;
        clear: both;
        font-size: 18px;
        }
    p {
        margin: 0 1em 0 1em;
        padding: 0.4em 0;
            font-size:16px;

        }

    #beta ul,
    #beta ol {
        margin: 0.5em 0.25em;
        padding: 0.5em 0.25em;
        }
    #beta li {
        padding: 0.1em 0 0.1em 0;
        line-height: 1.4em;
        }
    #beta dl {
        }
    #beta dl dt {
        border-left: 3px solid #CCCC00;
        padding: 0 0 0 5px;
        font-weight: bold;
        }
    #beta dl dd {
        margin: 0 0 1em 1em;
        }
        
    #beta li {
        /*padding: 0.2em 0 0.2em 0;
        line-height: 1.4em;
        float: left;*/
        display: inline;
        /*line-height: 1.5em;
        margin:0 0 0.3em 0;
        padding:0 0.3em 0 0.3em;
        border-right: 1px solid #ADADAD;*/
        list-style-type: none;
        }


    h5 {
        margin: 10px 0;
        padding: 0;
        font-size: 16px;
        font-weight: bold;
        clear: both;
        }

    fieldset {
        margin-left:8px;
        margin-right:8px;
        margin-top:2px;
        margin-bottom: 2px;
        padding-left:8px;
        padding-right:8px;
        padding-top:2px;
        padding-bottom: 2px;
        border: 1px Solid #80C269;
        }
    legend {
        color: #0068B7;
    }

    /* ---------- */
    #alpha ul,
    #gamma ul {
        margin: 0;
        padding: 0;
        list-style: none;
        }
    #alpha ul li,
    #gamma ul li {
        display: inline;
        padding: 0;
        margin: 0;
        }
    #alpha ul li a,
    #gamma ul li a {
        display: block;
        padding: 1px 0;
        text-decoration: none;
        border-bottom: 1px solid #CCCCCC;
        font-size: 16px;
        }
    #alpha ul li a:hover,
    #gamma ul li a:hover {
        background: #F6EBE0; 
        }
    #alpha ul li ul
    #gamma ul li ul {
        border-bottom: 0;
        }
    #alpha ul li ul li a,
    #gamma ul li ul li a {
        padding: 1px 0 1px 15px;
        border-bottom: 1px solid #CCCCCC;
        }
    #alpha ul li ul li a:hover,
    #gamma ul li ul li a:hover {
        background: #F6EBE0; 
        }
    #alpha ul li ul li ul,
    #gamma ul li ul li ul {
        border-bottom: 0;
        }
    #alpha ul li ul li ul li a,
    #gamma ul li ul li ul li a {
        padding: 1px 0 1px 30px;
        border-bottom: 1px solid #CCCCCC;
        }
    #alpha ul li ul li ul li a:hover,
    #gamma ul li ul li ul li a:hover {
        background: #F6EBE0; 
        }

    /* ---------- */
    #footer {
        clear: both;
        width: 100%;
        padding: 0 0 0 0;
        border-top: #0068B7 2px solid;
        }
    #footer #footer-inner address {
        text-align: center;
        font-style: normal;
        }

    /* Bread Crums */
    .breadcrumbs {
        width: 100%;
        background:#DDDDDD;
        margin: 0;
    }
    
    .breadcrumbs ul,
    .breadcrumbs ol  {
        display: table;
        font-size: 16px;
        width: 95%;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
    }
    
    .breadcrumbs ul li,
    .breadcrumbs ol li {
        margin: 0 0 0 0;
        font-size: 16px;
        /*float: left;*/
    }
    
    .breadcrumbs ul li:first-child::before,
    .breadcrumbs ol li:first-child::before {
        padding: 0 1px 0 0;
        content: "";
        font-size: 16px;
    }
    
    .breadcrumbs ul li::before,
    .breadcrumbs ol li::before {
        padding: 0 8px 0 8px;
        content: ">";
        font-size: 16px;
    }

    /* youtube */
    .movie-wrap {
        position: relative;
        padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
        height: 0;
        overflow: hidden;
    }
    
    .movie-wrap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }


}