﻿/* ========================================================
    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 {
 background:#fff;  /* Default #aaa */
}


/* css で動くスムーズスクロール 	21/02/02
	参考：https://www.to-r.net/media/smooth_scrolling_2019/
==========================================================================*/
html{
  scroll-behavior: smooth;
}


/* ページ偏移時、フェードインを行う 	21/02/02
	参考　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}
}


/* pageTop-----------------------------------------------------------------------
    トップへ戻るボタン CSSのみで実装                                 21/02/01 w4403 
    html、</body>前に　<a href="#" id="page-top">TOP</a> を記入
    head内に  <link rel="stylesheet" type="text/css" href="_assets/css/pageTop.css"> を記入
    参考　https://www.fuji-blo.com/entry/page-top　　　　210201  w4403
    ------------------------------------------------------------------------------*/
#page-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    height: 50px;
    text-decoration: none;
    font-weight: bold;
    transform: rotate(90deg);
    font-size: 90%;
    line-height: 1.5rem;
    color: #40709a;
    padding: 0 0 0 35px;
    border-top: solid 1px;
}
#page-top::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0px;
    width: 15px;
    border-top: solid 1px;
    transform: rotate(35deg);
    transform-origin: left top;
}

/* 1140グリッドシステム ------------------------------------------------------

	参考：http://cssgrid.net ? http://www.twitter.com/andytlr
-------------------------------------------------------------------------*/

.w1140{
 max-width:1140px;
}
.w1600{
 max-width:1600px;
}
.row {
 width: 100%;
 margin: 0 auto;
 overflow: hidden;
}

/* 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%;
}

