a.ss:link{      color:blue;     text-decoration:none;       font-weight:bold;   }       /* 通常表示         */
a.ss:visited{   color:blue;     text-decoration:underline;  font-weight:bold;   }       /* 通常表示         */
a.ss:hover{     color:red;      text-decoration:underline;  font-weight:bold;   }       /* カーソル直上     */
a.ss:active{    color:red;      text-decoration:none;       font-weight:bold;   }       /* 押した瞬間       */

div{
		&.is-Hidden{	display:	none;	}
}

body{   color:          black;      /* 文字の色                                                         */
        letter-spacing: normal;     /* 文字間隔 normal 1px 0.1em                                        */
        word-spacing:   normal;     /* 単語間隔                                                         */
        font-weight:    bold;       /* 文字の太さ normal, bold, lighter                                 */
        font-size:      medium;     /* xx-small x-small small medium large x-large xx-large xxx-large   */
        line-height:    160%;
        font-family:    "メイリオ";
        list-style-position: outside;
        margin-top:     0px;        /* 上端からのマージン                                       */
        margin-left:    0px;        /* 左端からのマージン                                       */
        margin-right:   0px;        /* 右端からのマージン                                       */
        margin-bottom:  0px;        /* 下端からのマージン                                       */
        background-image:       url(".jpg");
        background-repeat:      no-repeat;          /* 背景画像は繰り返さない                   */
        background-color:       #eeeeee;            /* 背景色   rgba(86, 86, 86, 0.6); 背景に限らず総ての色指定は、rgba指定により透明度を指定できる 0だと透明　0.9だとほぼ白    */
        background-position:    center top;         /* 背景画像は中央の上                       */
        background-size:        auto;               /* 背景画像の大きさ                         */
                                                    /*  auto        元の大きさのまま                                                            */
                                                    /*  contain     元画像の縦横比は保持して、要素に元画像が全て収まるように調整してくれます。  */
                                                    /*  cover       元画像の縦横比は保持して、要素をちょうどよく覆うサイズにしてくれます。      */
                                                    /*  数値(px)    明示的にpxで大きさを調整します。                                            */
                                                    /*  数値(%)     要素に対しての割合で指定します。                                            */
        background-attachment: local;               /* 背景画像をスクロールさせるか？                                                           */
                                                    /*  scroll  背景を要素自身に固定。要素内をスクロールしても背景は固定                        */
                                                    /*  fixed   背景を表示領域に固定。ページをスクロールしても背景は固定                        */
                                                    /*  local   背景をコンテンツに固定。背景も一緒にスクロールする。                            */
}

table{
        background-color:   white;
        border:             0;
        frame:              "void";
        rules:              "none";
        cellspacing:        0;
        cellpadding:        0;
        margin-left:        auto;   /* 左右マージンをオートにすると、センタリング   */
        margin-right:       auto;
}

td{
        vertical-align:     top;        /*  上寄せ      table等ブロック要素や親要素には指定できない*/
        text-align:         left;
}

p{
        text-align: right;
}

img{
    width:  50%;
    border: solid   0px     black;
}

.haba100{
    width:  100%;
}

.wakusen{
    border: solid   1px     black;
}

#penpen{
    width:  30%;
    border: solid   1px     black;
}

/* 幅900px以上 **********************************************************************/
@media screen and (min-width:900px) {

    .mode-pc {  display: inline;    }
    .mode-sm {  display: none;      }

    table{  max-width: 900px;       /* 横幅の最大値 */
            min-width: 900px;       /* 横幅の最小値 つまりPC画面ではテーブル幅1000に固定 */
    }

    h1{
        font-family:    "メイリオ";
        width:          500px;          /* 横幅400pxを5秒間で繰り返す */
        font-size:      xxx-large;      /* xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large */
        font-weight:    bold;
        line-height:    120%;
        margin-top:     0;
        margin-bottom:  0;
        font-style:     normal;
        background-size: 500% 100%;
        background-image: linear-gradient(
                                            70deg,          /* 光の角度 */
                                            blue    45%,    /*--アニメーション後の文字色--*/
                                            white   50%,    /*--アニメーション中の文字色--*/
                                            blue    55%     /*--アニメーション前の文字色--*/
                                        );
        background-clip:    text;
        color:              transparent;
        animation: shine 2s infinite;       /* アニメーションの速さ＆無限ループ */
    }
    
    @keyframes shine {
        0% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    #came1{
            width:  366px;
            border: solid   1px     black;
    }
    
    #came2{
            width:  331px;
            border: solid   1px     black;
    }
}

/* 幅899まで *********************************************************************/
@media screen and (max-width:899px) {

    .mode-pc {  display: none;      }
    .mode-sm {  display: inline;    }

    table{  
            width:  100%;
    }

    h1{
        font-family:    "メイリオ";
        width:          100%;           /* 横幅400pxを5秒間で繰り返す */
        font-size:      xx-large;       /* xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large */
        font-weight:    bold;
        line-height:    120%;
        margin-top:     0;
        margin-bottom:  0;
        font-style:     normal;
        background-size: 500% 100%;
        background-image: linear-gradient(
                                            70deg,          /* 光の角度 */
                                            red     45%,    /*--アニメーション後の文字色--*/
                                            white   50%,    /*--アニメーション中の文字色--*/
                                            red     55%     /*--アニメーション前の文字色--*/
                                        );
        background-clip:    text;
        color:              transparent;
        animation: shine 2s infinite;       /* アニメーションの速さ＆無限ループ */
    }

    @keyframes shine {
        0% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    img{
            width: 100%;
    }

    #came1{
            width:  100%;
            border: solid   1px     black;
    }
    
    #came2{
            width:  100%;
            border: solid   1px     black;
    }

    #penpen{
        width:  60%;
        border: solid   1px     black;
    }
}