/* ========================================================
    Hotaka P-Suppo 標準スタイルシート        2020/05/21渡辺 作成
        CSSリセット
      とっておきのcss
        ・スムーズスクロール
        ・ページ偏移時、フェードイン
        pagetop スタイル
        グリッドシステム1140
    ======================================================= */
/* CSS Resets */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}

/*全体の設定
---------------------------------------------------------------------------*/
body {
    margin: 0px;
    padding: 0px;
    color: #233313; /*全体の文字色*/
    font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;    /*フォント種類*/
    font-size: 16px;    /*文字サイズ*/
    line-height: 1.6;       /*行間*/
    background: #fff url('../images/bg.jpg');   /*背景色と背景壁紙*/
    -webkit-text-size-adjust: none;
    overflow-x: hidden;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
ol {padding-left: 65px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

/*コンテナー
---------------------------------------------------------------------------*/
#container {
    max-width: 1400px;  /*最大幅*/
    margin: 0 auto;
}

/*コンテンツ（左右ブロックを囲むボックス）
---------------------------------------------------------------------------*/
#contents {
    padding: 5% 8% 0;
    position: relative;z-index: 10;
    top: 0px;
    overflow: hidden;
}

/*メインコンテンツ
---------------------------------------------------------------------------*/
main {
    float: right;   /*右側に回り込み*/
    width: 73%;     /*幅     col9(74.05%) */
    overflow: hidden;
    padding-top: 10%;   /*コンテンツ上にあける余白*/
}
/*サブコンテンツ
---------------------------------------------------------------------------*/
aside {
    width: 22%;     /*幅     col3(22.15%) */
    float: left;
}
/* 自分が作成した共通部分 ================================================= */
.line { border:1px red solid;}  /* box位置確認用、class指定で赤線表示 */
.clear { clear: both; }
.space10 {margin-bottom: 10px;}
.space20 {margin-bottom: 20px;}


/* 画像配置-----------------------------------------------------*/
/*画像を右に配置　標準で800×600pxを使用*/
img.right {
    float: right;
	width: 30%;
	margin-left: 10px;
	border-radius: 5px;
}
/* css で動くスムーズスクロール */
html{
  scroll-behavior: smooth;
}
/* ページ偏移時、フェードインを行う */
/* 参考　https://q-az.net/fadein-open-only-css/ */
body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
/* totop　-------------------------------------------------------*/
/* pagetop スタイル標準化する、標準仕様　ボタンは〇色は青色 20200521 */
.totop {
    position:fixed;
    right:30px;
    bottom:30px;
    text-align: center;
    z-index: 900;
}

.totop a {
    display:block;
    width: 200px;height: 200px;
    color:#fff;
    text-decoration:none;
    background: #3dadea;
    border-radius: 100px;
}
.totop a:hover {
    background: #023793;
}


@media screen and (max-width:900px){
.totop {
    right:5px;
    bottom:5px;
 }
.totop a {
    width: 100px;height: 100px;
    border-radius: 50px;
}

.totop a:hover {
    background: #023793;
}
}

/* 1140グリッドシステム=============================================== */
/* 全画面表示 */
.row {
 width: 100%;
 margin: 0 auto;
 overflow: hidden;
}

.w1140{
 max-width:1140px;
}

/* The 1140px Grid by Andy Taylor ? http://cssgrid.net ? http://www.twitter.com/andytlr ? http://www.catchingzebra.com */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11 {
margin-right: 3.8%;
float: left;
}

.col1 {
width: 4.85%;
}

.col2 {
width: 13.5%;
}

.col3 {
width: 22.15%;
}

.col4 {
width: 30.8%;
}

.col5 {
width: 39.45%;
}

.col6 {
width: 48.1%;
}

/* .col7 {
width: 56.75%;
}*/

.col8 {
width: 65.4%;
}

.col9 {
width: 74.05%;
}

.col10 {
width: 82.7%;
}

.col11 {
width: 91.35%;
}

.col12 {
width: 100%;
float: left;
}

.last {
margin-right: 0px;
}

img, object, embed {
max-width: 100%;
}

img.last {
    float:right;

}