@charset "utf-8";

/*===================================

  * file name : layout.css
  * last update : 2022/08/05

=======================================

-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table.table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table.table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* -------------------------------------------------------------- */

body {
color:#555;
font-size:small;
font-family:verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:1.5;
-webkit-text-size-adjust: none;
}

/*----------------------------------
    ・All
---------------------------------------------------*/
a{
	text-decoration: none;
	color: #02660D;
}

#footer a:hover{
	text-decoration: underline;
}

#footer a:visited{
	color: #02660D;
}

#wrapper{
    margin:0 auto;
    padding:0 1%;
    width:98%;
    position:relative;
    background:#fff;
}

/*----------------------------------
    ・PC
---------------------------------------------------*/
@media only screen and (min-width: 1280px){
	#wrapper,#header,footer,.inner{
	width:1280px;
	padding:0;
	margin:0 auto;
	}
	
	#wrapper{padding-bottom:20px;}
	
	/*----------------------------------
    ・Header
    ---------------------------------------------------*/
    #header{
        position:relative;
    	width:1280px;
        margin: 0 auto;
    }

    #header .logo{
        padding: 20px 0 0 0;
        height: 100px;
    }

    #header .logo span{display:block;}


    .headertext{
        position: absolute;
        width: 100%;
    }
    .headertext h1{
        font-size: 10px;
        float: left;
    }

    .headertext h2{
        font-size: 10px;
        text-align: right;
        float: none;
    }

    #headerimg{
        padding:25px 0 0 0;
        background-image: url("../img/topimg.png");
        background-repeat: no-repeat;  
        height: 315px;
    }
    .borderlogo{
        padding: 25px 0 0 0;
        background-image: url("../img/borderlogo.png");
        background-repeat: repeat-x;
    }

    .borderlogo span{display:block;}
    .borderlogoalpha{
        padding: 25px 0 0 0;
        background-image: url("../img/borderlogoalpha.png");
        background-repeat: repeat-x;
    }

    .borderlogoalpha span{display:block;}

    /*----------------------------------
        ・JOB Kind
    ---------------------------------------------------*/
    section#job{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    section#job .jobkind{
        width: calc(33.3% - 10px);
    }
    /*----------------------------------
        ・Own Products
    ---------------------------------------------------*/
    section#products .systitle{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 20px 0 30px 0;
    }

    section#products .systitle h1{
        font-size: 20px;
        font-weight: bold;
    }
    section#products .systitle .sysborder{
        background-image: url("../img/borderlogo.png");
        background-repeat: repeat-x;
        background-position: center;
        width: calc(85% - 10px);
    }

    section .sys{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
    }
    section .sys .sysinfo h1{
        font-size: 20px;
        font-weight: bold;
        color: #006934;
    }
    section .sys .sysinfo h3{
        margin-top: 30px;
    }
    section .sys .sysinfo{
        max-width: 40%;
    }
    /*----------------------------------
        ・Company Information
    ---------------------------------------------------*/
    section#cinfo .systitle{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 20px 0 30px 0;
    }

    section#cinfo .systitle h1{
        font-size: 20px;
        font-weight: bold;
    }
    section#cinfo .systitle .sysborder{
        background-image: url("../img/borderlogo.png");
        background-repeat: repeat-x;
        background-position: center;
        width: calc(75% - 10px);
    }
    section#cinfo{
        text-align: right;
        height: 500px;
    }
    /*----------------------------------
        ・Contact
    ---------------------------------------------------*/
    section#contact .systitle{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 20px 0 30px 0;
    }

    section#contact .systitle h1{
        font-size: 20px;
        font-weight: bold;
    }
    section#contact .systitle .sysborder{
        background-image: url("../img/borderlogo.png");
        background-repeat: repeat-x;
        background-position: center;
        width: calc(90% - 10px);
    }
    /*----------------------------------
        ・Contact
    ---------------------------------------------------*/
    section#contact .submit-button{
        display       : inline-block;
        border-radius : 5%;          /* 角丸       */
        font-size     : 13pt;        /* 文字サイズ */
        text-align    : center;      /* 文字位置   */
        cursor        : pointer;     /* カーソル   */
        padding       : 12px 12px;   /* 余白       */
        background    : #000000;     /* 背景色     */
        color         : #ffffff;     /* 文字色     */
        line-height   : 0.7em;         /* 1行の高さ  */
        transition    : .3s;         /* なめらか変化 */
        box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
        border        : 2px solid #000000;    /* 枠の指定 */
    }
    section#contact .submit-button:hover{
        box-shadow    : none;        /* カーソル時の影消去 */
        color         : #000000;     /* 背景色     */
        background    : #ffffff;     /* 文字色     */ 
    }
    section#contact dl{
        width: 80%;
        margin: 0 auto;
    }
    section#contact dt{
    }
    section#contact dd{
        margin-left: 100px;
    }
    section#contact textarea{
        width: 100%;
    }
    section#contact .entry{
        margin-top: 20px;
        text-align: center;
    }
    /*----------------------------------
        ・Footer
    ---------------------------------------------------*/
    footer#footer .logo{
        padding: 20px 0 0 0;
        height: 75px;
        text-align: right;
    }

    footer#footer .logo span{display:block;}

    footer#footer h1{
        text-align: right;
        font-size: 10px;
        margin-bottom: 20px;
    }
    /*----------------------------------
            ・To PageTop Button
    ---------------------------------------------------*/
    #to-pagetop{
        position: fixed;
        right: 20px;
        bottom: 20px;
        display: none;
    }

    #to-pagetop a{
        padding: 20px;
        text-decoration: none;
        cursor: pointer;
        display: block;
    }
    /*----------------------------------
        ・Error
    ---------------------------------------------------*/
    section#main h3{
        font-size: 20px;
        margin: 100px 0;
    }
    section#main h4{
        font-size: 20px;
        margin: 100px 0;
    }
}


@media only screen and (max-width:1279px){
	*{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	}
	
	#header{padding:0 10px;}
	
    /*----------------------------------
    ・Header
    ---------------------------------------------------*/
    #header{
        position:relative;
        margin: 0 auto;
    }

    #header .logo{
        padding: 20px 0 0 0;
        height: 120px;
    }

    #header .logo span{display:block;}


    .headertext{
        position: absolute;
        width: 98%;
    }
    .headertext h1{
        font-size: 10px;
        float: left;
    }

    .headertext h2{
        font-size: 10px;
        text-align: right;
        float: none;
    }

    #headerimg{
        padding:25px 0 0 0;
        background-image: url("../img/topimg.png");
        background-repeat: no-repeat;  
        height: 335px;
    }
    .borderlogo{
        padding: 25px 0 0 0;
        background-image: url("../img/borderlogo.png");
        background-repeat: repeat-x;
    }

    .borderlogo span{display:block;}
    .borderlogoalpha{
        padding: 25px 0 0 0;
        background-image: url("../img/borderlogoalpha.png");
        background-repeat: repeat-x;
    }

    .borderlogoalpha span{display:block;}

    /*----------------------------------
        ・JOB Kind
    ---------------------------------------------------*/
    section#job{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    section#job .jobkind{
        width: calc(33.3% - 10px);
    }
    /*----------------------------------
        ・Own Products
    ---------------------------------------------------*/
    section#products .systitle{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 20px 0 30px 0;
    }

    section#products .systitle h1{
        font-size: 17px;
        font-weight: bold;
    }
    section#products .systitle .sysborder{
        background-image: url("../img/borderlogo.png");
        background-repeat: repeat-x;
        background-position: center;
        width: calc(85% - 10px);
    }

    section .sys{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
    }
    section .sys .sysinfo h1{
        font-size: 20px;
        font-weight: bold;
        color: #006934;
    }
    section .sys .sysinfo h3{
        margin-top: 30px;
    }
    section .sys .sysinfo{
        max-width: 40%;
    }
    /*----------------------------------
        ・Company Information
    ---------------------------------------------------*/
    section#cinfo .systitle{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 20px 0 30px 0;
    }

    section#cinfo .systitle h1{
        font-size: 17px;
        font-weight: bold;
    }
    section#cinfo .systitle .sysborder{
        background-image: url("../img/borderlogo.png");
        background-repeat: repeat-x;
        background-position: center;
        width: calc(75% - 10px);
    }
    section#cinfo{
        text-align: right;
        height: 350px;
    }
    /*----------------------------------
        ・Contact
    ---------------------------------------------------*/
    section#contact .systitle{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 20px 0 30px 0;
    }

    section#contact .systitle h1{
        font-size: 17px;
        font-weight: bold;
    }
    section#contact .systitle .sysborder{
        background-image: url("../img/borderlogo.png");
        background-repeat: repeat-x;
        background-position: center;
        width: calc(90% - 10px);
    }
    /*----------------------------------
        ・Contact
    ---------------------------------------------------*/
    section#contact .submit-button{
        display       : inline-block;
        border-radius : 5%;          /* 角丸       */
        font-size     : 13pt;        /* 文字サイズ */
        text-align    : center;      /* 文字位置   */
        cursor        : pointer;     /* カーソル   */
        padding       : 12px 12px;   /* 余白       */
        background    : #000000;     /* 背景色     */
        color         : #ffffff;     /* 文字色     */
        line-height   : 0.7em;         /* 1行の高さ  */
        transition    : .3s;         /* なめらか変化 */
        box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
        border        : 2px solid #000000;    /* 枠の指定 */
    }
    section#contact .submit-button:hover{
        box-shadow    : none;        /* カーソル時の影消去 */
        color         : #000000;     /* 背景色     */
        background    : #ffffff;     /* 文字色     */ 
    }
    section#contact dl{
        width: 80%;
        margin: 0 auto;
    }
    section#contact dt{
    }
    section#contact dd{
        margin-left: 100px;
    }
    section#contact textarea{
        width: 100%;
    }
    section#contact .entry{
        margin-top: 20px;
        text-align: center;
    }
    /*----------------------------------
        ・Footer
    ---------------------------------------------------*/
    footer#footer .logo{
        padding: 20px 0 0 0;
        height: 105px;
        text-align: right;
        width: 98%;
    }

    footer#footer .logo span{display:block;}

    footer#footer h1{
        text-align: right;
        font-size: 10px;
        margin-bottom: 20px;
        width: 98%;
    }
    /*----------------------------------
            ・To PageTop Button
    ---------------------------------------------------*/
    #to-pagetop{
        position: fixed;
        right: 5px;
        bottom: 5px;
        display: none;
    }

    #to-pagetop a{
        padding: 5px;
        text-decoration: none;
        cursor: pointer;
        display: block;
    }
    /*----------------------------------
        ・Error
    ---------------------------------------------------*/
    section#main h3{
        font-size: 20px;
        margin: 100px 0;
    }
    section#main h4{
        font-size: 20px;
        margin: 100px 0;
    }
}

/*----------------------------------
    ・SmartPhone Beside
---------------------------------------------------*/
@media only screen and (max-width:640px){
	#header{
	height:auto;
	padding-bottom:20px;
	}
	
	#header ,.logo{text-align:center;}
	
	.logo{
	clear:both;
	width:100%;
	float:none;
	margin:0;
	}
	
	.alignleft,.alignright{
		float: none;
		display: block;
		margin: 0 auto 10px;
	}
    
    /*----------------------------------
    ・Header
    ---------------------------------------------------*/
    #header{
        position:relative;
        margin: 0 auto;
    }

    #header .logo{
        padding: 20px 0 0 0;
        height: 120px;
    }

    #header .logo span{display:block;}


    .headertext{
        position: absolute;
        width: 95%;
    }
    .headertext h1{
        font-size: 10px;
        float: left;
    }

    .headertext h2{
        font-size: 10px;
        text-align: right;
        float: none;
    }

    #headerimg{
        padding:25px 0 0 0;
        background-image: url("../img/topimg.png");
        background-repeat: no-repeat;  
        height: 335px;
    }
    .borderlogo{
        padding: 25px 0 0 0;
        background-image: url("../img/borderlogo.png");
        background-repeat: repeat-x;
    }

    .borderlogo span{display:block;}
    .borderlogoalpha{
        padding: 25px 0 0 0;
        background-image: url("../img/borderlogoalpha.png");
        background-repeat: repeat-x;
    }

    .borderlogoalpha span{display:block;}

    /*----------------------------------
        ・JOB Kind
    ---------------------------------------------------*/
    section#job{
        position: relative;
        width: 100%;
        display: contents;
    }
    section#job .jobkind{
        width: 100%;
        margin-bottom: 20px;
    }
    section#job .jobkind h1{
        font-weight: bold;
    }
    /*----------------------------------
        ・Own Products
    ---------------------------------------------------*/
    section#products .systitle{
        position: relative;
        width: 100%;
        display: contents;
        justify-content: space-between;
        margin: 20px 0 30px 0;
    }

    section#products .systitle h1{
        font-size: 17px;
        font-weight: bold;
    }
    section#products .systitle .sysborder{
        background-image: url("../img/borderlogo.png");
        background-repeat: repeat-x;
        background-position: center;
        width: calc(85% - 10px);
    }

    section .sys{
        position: relative;
        width: 100%;
        display: contents;
        justify-content: space-between;
        margin-bottom: 30px;
    }
    section .sys .sysinfo h1{
        font-size: 20px;
        font-weight: bold;
        color: #006934;
    }
    section .sys .sysinfo h3{
        margin-top: 30px;
    }
    section .sys .sysinfo{
        max-width: 100%;
    }
    /*----------------------------------
        ・Company Information
    ---------------------------------------------------*/
    section#cinfo .systitle{
        position: relative;
        width: 100%;
        display: contents;
        margin: 20px 0 30px 0;
    }

    section#cinfo .systitle h1{
        font-size: 17px;
        font-weight: bold;
        text-align: left;
    }
    section#cinfo .systitle .sysborder{
        background-image: url("../img/borderlogo.png");
        background-repeat: repeat-x;
        background-position: center;
        width: 95%;
    }
    section#cinfo{
        text-align: right;
        height: 200px;
    }
    /*----------------------------------
        ・Contact
    ---------------------------------------------------*/
    section#contact .systitle{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 20px 0 30px 0;
    }

    section#contact .systitle h1{
        font-size: 17px;
        font-weight: bold;
    }
    section#contact .systitle .sysborder{
        background-image: url("../img/borderlogo.png");
        background-repeat: repeat-x;
        background-position: center;
        width: calc(90% - 10px);
    }
    /*----------------------------------
        ・Contact
    ---------------------------------------------------*/
    section#contact .submit-button{
        display       : inline-block;
        border-radius : 5%;          /* 角丸       */
        font-size     : 13pt;        /* 文字サイズ */
        text-align    : center;      /* 文字位置   */
        cursor        : pointer;     /* カーソル   */
        padding       : 12px 12px;   /* 余白       */
        background    : #000000;     /* 背景色     */
        color         : #ffffff;     /* 文字色     */
        line-height   : 0.7em;         /* 1行の高さ  */
        transition    : .3s;         /* なめらか変化 */
        box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
        border        : 2px solid #000000;    /* 枠の指定 */
    }
    section#contact .submit-button:hover{
        box-shadow    : none;        /* カーソル時の影消去 */
        color         : #000000;     /* 背景色     */
        background    : #ffffff;     /* 文字色     */ 
    }
    section#contact dl{
        width: 80%;
        margin: 0 auto;
    }
    section#contact dt{
    }
    section#contact dd{
        margin-left: 100px;
    }
    section#contact textarea{
        width: 100%;
    }
    section#contact .entry{
        margin-top: 20px;
        text-align: center;
    }
    /*----------------------------------
        ・Footer
    ---------------------------------------------------*/
    footer#footer .logo{
        padding: 20px 0 0 0;
        height: 105px;
        text-align: right;
        width: 98%;
    }

    footer#footer .logo span{display:block;}

    footer#footer h1{
        text-align: right;
        font-size: 10px;
        margin-bottom: 20px;
        width: 98%;
    }
    /*----------------------------------
            ・To PageTop Button
    ---------------------------------------------------*/
    #to-pagetop{
        position: fixed;
        right: 5px;
        bottom: 5px;
        display: none;
    }

    #to-pagetop a{
        padding: 5px;
        text-decoration: none;
        cursor: pointer;
        display: block;
    }
}

/*----------------------------------
    ・SmartPhone Vertical
---------------------------------------------------*/
@media only screen and (max-width:480px){
	.grid{width:100%;}
	.box img{max-width:100px;}
	#mainBanner h2,#mainBanner p{font-size:80%;}
	#sidebar p{text-align:center;}
    
    
}