/*タイプセレクタ：（指定の要素だけに適用）*/ 


body { 

       font-family : arial ;

       scrollbar-base-color : #6699cc;

       -webkit-text-size-adjust: 100%; /*スマホで勝手に文字が大きくなる対策*/

     }

body,th,td { 

             margin: 0 ; padding: 0 ; font-size: 15px ; line-height: 1.618 ; /*スペース,余白,文字サイズ,行の高さ*/

             font-family : arial ;

           }


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

th { white-space: nowrap; } /*文章が折返されないようにする*/

ul { padding-right: 20px; padding-bottom: 10px; } /*リストの右、下の余白を調整する*/

ol { padding-right: 20px; padding-bottom: 20px;} /*リストの右、下の余白を調整する*/

li { margin-bottom: 10px; margin-top: 0;} /*リスト項目の間隔を指定する*/

h3 { padding-top: 20px; } /*見出し（h3）の上余白を調整する*/

h4 { padding-left: 20px; padding-bottom: 0px; }







/*クラスセレクタ：（指定のクラスだけに適用）*/



.all { max-width: 1000px; margin: auto; } /*PCでは横幅が1000px以上の部分は余白にする*/


.text { display: inline-block; } /*文章の折返し位置を調節する*/

.gyo1 { line-height: 180%; }

.gyo2 { line-height: 150%; }

.gyo3 { line-height: 130%; }



.pad5 { padding: 5px; }

.pad10 { padding: 10px; }


.top10 { margin-top: 10px; }

.top5 { margin-top: 5px; }


.ptop10 { margin-top: 10px; } /*PCのみ上の余白10pxつける*/

.ptop5 { margin-top: 5px; } /*PCのみ上の余白5pxつける*/



.center { text-align:center; } /*文章や画像を中央(左右)に配置する*/






.sukima0 { margin: 0; }

.sukima3 { margin-bottom: 3px; }

.sukima5 { margin-bottom: 5px; }

.sukima10 { margin-bottom: 10px; }

.sukima20 { margin-bottom: 20px; }

.sukima30 { margin-bottom: 30px; }

.pc { display: block !important; } /* パソコンで見たときは"pc"のclassがついた画像が表示される */

.mb { display: none !important; }  /* パソコンで見たときは"pc"のclassがついた画像が表示される */
 



.pc-new-post { display: none ; } /* PCだけ非表示にする */



.yokol { float:left; overflow: hidden; } /* 横並び、左寄せにする */

.yokor { float:right; } /* 横並び、右寄せにする */

.clear{clear:both;} /* 左右両方のfloatを解除する(空のDIVにこのスタイルを適用すると、上下の float をこの部分でクリアすることができる) */










/* 全体(デスクトップPCとスマホ)に適用するCSS */

.main {

        float: right ; /* 右に寄せる */

        width: 78% ; padding: 1% ; border: 0px solid rgba(0,0,0,.1) ; /* 上下左右に2%の余白,枠線 */

       }

.side {

        float: left ; /* 左に寄せる */

        width: 19% ; padding: 1% 0% 1% 1% ;

       }


.wrapper {

           width: 100% ; margin: 0 auto ; padding: 0 ; /* 左右に[auto]を指定することで、真ん中に寄る,上下左右の余白を0にしておく */

           overflow: hidden ; /* floatを解除する */

          }

















/*タイプセレクタ+クラスセレクタ：（指定の要素の指定のクラスだけに適用）*/


td.nowrap { white-space: nowrap; } /*文章が折返されないようにする*/

td.center { text-align: center; } /*中央に配置する(左右)*/

td.top { valign: top; } /*上に詰めて配置する*/

td.middle { text-valign: middle; } /*中央に配置する(上下)*/

td.bottom { text-valign: bottom; } /*下に詰めて配置する*/

td.pad { padding-left: 10px; }



ul.mar1 li { margin-bottom: 10px; }

p.pad1 { padding-left: 30px; padding-right: 20px; }

p.pad2 { padding-left: 40px; padding-right: 20px; }

p.pad3 { padding-left: 30px; padding-right: 20px; padding-bottom: 20px; }

p.pad4 { padding: 0px 20px ; }

p.pad5 { padding-right: 30px ; }

p.font-s { font-size: 12px ; }

p.font-xs { font-size: 10px ; }


img.mar10 { margin: 10px ; }





/*擬似クラス：（要素や属性などの文書構造だけでは特定できない
“ある状況にある要素”を対象としてスタイルを適用するセレクタ）*/


a:link. {text-decoration: underline;color:#0099ff;}
a:visited. {text-decoration: underline;color:#0099ff;}
a:hover. {text-decoration: underline;color:#cc3300;}










/*スライドショーのCSS↓*/

.photo-show { 
    height: 400px; /*表示したい大きさ*/
    margin: 0px auto; /*余白なし*/
    max-width: 100%;
    position: relative;
    width: 780px; /*表示したい大きさ*/
}

.photo-show img { 
    animation: show 80s infinite;
    -webkit-animation: show 80s infinite;
    border-radius: 0%;
    height: auto;
    max-width: 100%;
    opacity: 0;
    position: absolute; /*画像を全て重ねる*/
　　
}

/*アニメーション*/

@keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    10% {opacity:1}
    20% {opacity:0}
 }

@-webkit-keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    10% {opacity:1}
    20% {opacity:0}
}

/*各画像のアニメーションの開始時間をずらす*/

.photo-show img:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

.photo-show img:nth-of-type(2) {
    animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

.photo-show img:nth-of-type(3) {
    animation-delay: 20s;
    -webkit-animation-delay: 20s;
}

.photo-show img:nth-of-type(4) {
    animation-delay: 30s;
    -webkit-animation-delay: 30s;
}

.photo-show img:nth-of-type(5) {
    animation-delay: 40s;
    -webkit-animation-delay: 40s
}

.photo-show img:nth-of-type(6) {
    animation-delay: 50s;
    -webkit-animation-delay: 50s;
}

.photo-show img:nth-of-type(7) {
    animation-delay: 60s;
    -webkit-animation-delay: 60s;
} 
.photo-show img:nth-of-type(8) {
    animation-delay: 70s;
    -webkit-animation-delay: 70s;
}

/*マウスが画像に重なった際、動きを止めて四角くする*/

.photo-show img {
    transition: 0.2s;
    -webkit-transition: 0.2s;
}

.photo-show:hover img {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
    border-radius: 0;
}


/*スライドショーのCSS↑*/











/* スマホにだけ適用するCSS（ウィンドウ幅が479px以下の場合に適用するCSS） */


@media screen and ( max-width:479px )


{


body { font-size: 13px ; } /* 文字サイズ */

td.ta1 { display: block; float: left; } /*指定したテーブルの行（横列）を縦に並べる*/



.block {display: block;  float: left; }

.main { float: none ; } /* floatを無効にする */
	
.side { float: none ; } /* floatを無効にする */


.yoko1 { float: none ; }/* floatを無効にする */

.yoko2 { float: none ; }/* floatを無効にする */





.main { width: auto ; padding: 0 ; border: none ; } /* 余白,枠線 */
	
.side { width: auto ; }

.new-post { display: none ; } /* スマホだけ非表示にする */


.img-flex { display: -webkit-flex; display: flex; } /* スマホだけ横並びにする */

/*.img-flex img { margin-right: 20px; margin-bottom: 20px; }*/

/*.img-flex img:last-child { margin-right: 0; }*/




.menu { display: table; table-layout: fixed; width: 100%; text-align: center; }

.menu img { display:table-cell; vertical-align:middle; }


.index { display: table; table-layout: auto; width: 100%; text-align: center;  white-space: nowrap; }


.pc { display: none !important; } /* スマートフォンで見たときは"mb"のclassがついた画像が表示される */

.mb { display: block !important; } /* スマートフォンで見たときは"mb"のclassがついた画像が表示される */



.ptop10 { margin-top: 0px; } /*PCのみ上の余白10pxつける*/

.ptop5 { margin-top: 0px; } /*PCのみ上の余白5pxつける*/


.mar10 { margin: 10px; }






.photo-show { 
    height: 230px; /*表示したい大きさ*/
    margin: 0px auto; /*余白なし*/
    max-width: 100%;
    position: relative;
    width: 780px; /*表示したい大きさ*/
}




}











/* スマホにだけ適用するCSS（ウィンドウ幅が750px以下の場合に適用するCSS） */


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

{




td.ta1 { display: block; } /*指定したテーブルの行（横列）を縦に並べる*/




.wrapper { width: auto ; padding: 0 10px ; } /* 左右の余白 */




 /* 横列の幅 */
	
.haba40 { width: 40% ; /* 横幅 */ }

.haba30 { width: 30% ; /* 横幅 */ }

.haba20 { width: 20% ; /* 横幅 */ }






}



-----------------------------------------------------------------------