@charset "utf-8";
/**幅961px以上
------------------------------*/
/*共通項目
------------------------------*/
html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body{
    margin: 0;
    padding: 0;
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    -webkit-text-size-adjust: 100%;
}

#wrapper{
    width: 100%;
    overflow-x: hidden;
    background-color: #fff;
}

ul{
    list-style: none;
}

h1,h2,h3,h4{
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-weight : normal;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section,
{
    box-sizing: content-box;
    display: block;
}

img{
    vertical-align: top;/*firefoxのバグを避ける*/
    display:block;
}

a{
    text-decoration:none;
}

/*
a:link{
    font-size: 1.2rem;
    color: #18933b;
    text-decoration:none;
}

a:visited{
    font-size: 1.2rem;
    color: #18933b;
    text-decoration:none;
}

a:hover{
    font-size: 1.2rem;
    color: #000;
    text-decoration:none;
}

a:active{
    font-size: 1.2rem;
    color: #18933b;
    text-decoration:none;
}*/

.contents{
    box-sizing: content-box;
    max-width: 960px;
    min-width: 320px;
    margin: 0 auto;
}

.line-1024-02{
    max-width: 1024px;
    min-width: 320px;
    margin: 0 auto;
    display: flex;
    padding-bottom: 10px;
}

.line-1024-l{
    display: block;
    width: calc(50%);
    margin: 0;
    padding: 0;
}

.line-1024-r{
    display: block;
    width: calc(50%);
    margin: 0;
    padding: 0;
}

.bg-glay{
    width: 100%;
    padding: 32px 0;
    background-color: #e6e6e6;
}

.stit{
    padding-bottom: 1.2em;
}

#breadcrumb{
    max-width: 1024px;
    min-width: 320px;
    margin: 0 auto;
    font-size: 1.2rem;
    margin-bottom: 32px;
    padding-bottom: 10px;
}

.download{
    width: 290px;
    padding: 16px 0;
    text-align: center;
    font-size: 1.4rem;
}

.txt-white{
    color: #fff;
}

.txt-red{
    color: #b7335b;
}

.txt-green{
    color: #18933b;
}

.txt-18{
    font-size: 1.8rem;
}

.txt-12{
    font-size: 1.2rem;
}

/*ヘッダ
------------------------------*/
#head-pd{
    padding-bottom: 24px;
}

#line-upper{
    width: 100%;
    display: flex;
    padding-bottom: 8px;
}

#line-upper-l{
    display: block;
    width: calc(50%);
    margin: 0;
    padding: 0;
}

#line-upper-r{
    display: block;
    width: calc(50%);
    margin: 0;
    padding: 0;
}

.hr-red{
    width: 100%;
    height: 8px;
    margin: 0;
    background-color: #b7335b;
    border: none;
}

.hr-green{
    display: block;
    width: 100%;
    height: 8px;
    margin: 0;
    background-color: #18933b;
    border: none;
}

#menu{
    box-sizing: content-box;
    max-width: 1024px;
    min-width: 320px;
    margin: 0 auto;
    text-align: left;
}

#menu:after{
    content: "";
    clear: both;
    display: block;
}

#menu-logo{
    width: 108px;
    margin: 0;
    padding: 0 16px 0 0;
    float: left;
}

#menu-company{
    padding-bottom: 15px;
}

#menu-nav{
    max-width: 900px;
    min-width: 251px;
    text-align: right;
}

#gnav a:link{
    display: block;
    width: 144px;
    height: 12px;
    font-size: 1.2rem;
    color:#000;
    padding: 4px 0 3px 0;
    border: #ccc 1px solid;
}

#gnav a:visited{
    display: block;
    width: 144px;
    height: 12px;
    font-size: 1.2rem;
    color:#000;
    padding: 4px 0 3px 0;
    border: #ccc 1px solid;
}

#gnav a:hover{
    color:#fff;
    border: #b7335b 1px solid;
    background-color: #b7335b;
}

#gnav a:active{
    display: block;
    width: 144px;
    height: 12px;
    font-size: 1.2rem;
    color:#000;
    padding: 4px 0 3px 0;
    border: #ccc 1px solid;
}

#gnav ul{
    display: flex;
}

#gnav ul li{
    display: block;
    text-align: center;
    padding-right: 16px;
}

#gnav ul li:nth-child(5){
    display: block;
    text-align: center;
    padding-right: 0;
}

/*ハンバーガーメニュー*/
#nav-drawer {
    display:none;
}

/*アンカー
------------------------------*/
.page-top{
    box-sizing: content-box;
    width: 960px;
    margin: 0 auto;
    padding: 10px 0;
    text-align: right;
}

.page-top a:link{
    font-size: 1.2rem;
    color:#18933b;
}

.page-top a:visited{
    font-size: 1.2rem;
    color:#18933b;
}

.page-top a:hover{
    font-size: 1.2rem;
    color:#666;
}

.page-top a:active{
    font-size: 1.2rem;
    color:#18933b;
}

/*フッタ
------------------------------*/
#footer-out{
    width: 100%;
    padding: 32px 0;
    background-color: #595757;
    text-align: center;
}

#fnav{
    width: 960px;
    margin: 0 auto;
    padding-bottom: 32px;
    font-size: 1.2rem;
    text-align: center;
}

#fnav ul li{
    padding-left: 3rem;
    display: inline;
}

#fnav ul li a:link{
    color:#fff;
}

#fnav ul li a:visited{
    color:#fff;
}

#fnav ul li a:hover{
    color:#ccc;
}

#fnav ul li a:active{
    color:#18933b;
}

#info-company{
    width: 960px;
    margin: 0 auto;
    padding-bottom: 8px;padding-bottom: 18px;
    line-height: 1.5em;
}

#info-company p{
    display:inline-block;
    text-align: left;
    vertical-align:middle;
    padding-right: 12px;
}

/*トップページ
------------------------------*/
.top-contents{
    width: 960px;
    margin: 0 auto;
}

#slide-show{
    width: 1024px;
    margin: 0 auto;
}

#slide-show img{
    width: 100%;
}

#slide-show .mask {
    margin:0 auto;
    width:1024px;
    height:400px;
    position:relative;
    overflow:hidden;
}

#slide-show ul{
    list-style:none;
    width:1024px;
    height:400px;
    margin: 0;
    padding: 0;
    position:relative;
}

#slide-show li{
    margin:0;
    padding: 0;
    width:1024px;
    height:400px;
    top:0;
    left:100%;
    position:absolute;
    overflow:hidden;
    -moz-animation:slide 30s 0s infinite;
    -webkit-animation:slide 30s 0s infinite;
    animation:slide 30s 0s infinite;
    -moz-animation-play-state:running;
    -webkit-animation-play-state:running;
    animation-play-state:running;
}

#slide-show li:nth-of-type(1){
    -moz-animation-delay:0s;
    -webkit-animation-delay:0s;
    animation-delay:0s;
}

#slide-show li:nth-of-type(2){
    -moz-animation-delay:6s;
    -webkit-animation-delay:6s;
    animation-delay:6s;
}

#slide-show li:nth-of-type(3){
    -moz-animation-delay:12s;
    -webkit-animation-delay:12s;
    animation-delay:12s;
}

#slide-show li:nth-of-type(4){
    -moz-animation-delay:18s;
    -webkit-animation-delay:18s;
    animation-delay:18s;
}

#slide-show li:nth-of-type(5){
    -moz-animation-delay:24s;
    -webkit-animation-delay:24s;
    animation-delay:24s;
}

@-moz-keyframes slide {
    0% {left:100%;opacity:0.5;z-index:10;}    /*フレームイン開始*/
    10% {left:0%;opacity:1;}        /*(a)全体の1/10秒でフレームイン終了*/
    20% {left:0%;opacity:1;}    /*(b)ここまで停止して、フレームアウト開始（b = 100 / スライド数） */
    30% {left:-100%;top:0%;opacity:0.5;}    /*(c)フレームアウト終了（c = a） */
    50% {left:-100%;top:100%;}        /* 分かりやすい様に、見えないエリアで迂回させた */
    70% {left:100%;top:100%;}
    80% {left:100%;top:0%;}
}

@-webkit-keyframes slide {
    0% {left:100%;opacity:0.5;z-index:10;}    /*フレームイン開始*/
    10% {left:0%;opacity:1;}        /*(a)全体の1/10秒でフレームイン終了*/
    20% {left:0%;opacity:1;}    /*(b)ここまで停止して、フレームアウト開始（b = 100 / スライド数） */
    30% {left:-100%;top:0%;opacity:0.5;}    /*(c)フレームアウト終了（c = a） */
    50% {left:-100%;top:100%;}        /* 分かりやすい様に、見えないエリアで迂回させた */
    70% {left:100%;top:100%;}
    80% {left:100%;top:0%;}
}

@keyframes slide {
    0% {left:100%;opacity:0.5;z-index:10;}    /*フレームイン開始*/
    10% {left:0%;opacity:1;}        /*(a)全体の1/10秒でフレームイン終了*/
    20% {left:0%;opacity:1;}    /*(b)ここまで停止して、フレームアウト開始（b = 100 / スライド数） */
    30% {left:-100%;top:0%;opacity:0.5;}    /*(c)フレームアウト終了（c = a） */
    50% {left:-100%;top:100%;}        /* 分かりやすい様に、見えないエリアで迂回させた */
    70% {left:100%;top:100%;}
    80% {left:100%;top:0%;}
}

.line-1024{
    width: 1024px;
    margin: 0 auto;
    display: flex;
    padding-bottom: 32px;
}

.column02{
    display: flex;
}

.top-patent-l{
    display: block;
    width: calc(50%);
    margin: 0;
    padding: 0;
}

.top-patent-r{
    display: block;
    box-sizing: content-box;
    width: calc(50%);
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1.5em;
    color: #666666;
}

.registration ul{
    display: flex;
}

.registration ul li{
    padding-right: 16px;
}

.registration ul li img{
    border: #ccc 1px solid;
}

.registration ul li img:hover{
    opacity: 0.5;
}

/*意匠登録
------------------------------*/
#patent{
    display: flex;
}

#patent-l{
    display: block;
    box-sizing: border-box;
    width: calc(338px);
    padding: 0 32px 32px 0;
}

#patent-l img{
    border: #ccc 1px solid;
}

#patent-r{
    display: block;
    width: calc(622px);
    font-size: 1.4rem;
    line-height: 1.5em;
    padding-bottom: 32px;
    overflow: hidden;
}

#patent-r table{
    box-sizing: content-box;
    width: 100%;
    border-collapse: separate;
    padding-bottom: 16px;
}

#patent-r th{
    box-sizing: border-box;
    padding: 16px;
    text-align: left;
    vertical-align: middle;
    font-weight: normal;
    border-top: solid 1px #000;
}

#patent-r td{
        box-sizing: border-box;
    width: 70%;
    padding: 16px;
    text-align: left;
    border-top: solid 1px #000;
}

.explanation{
    columns: 2 auto;
    font-size: 1.6rem;
    line-height: 1.5em;
    color: #666;
}

.explanation p{
    padding-bottom: 1.5em;
}

.zumen{
    box-sizing: border-box;
    width: 472px;
}

.album ul{
    width: 960px;
    display: flex;
    flex-wrap: wrap;
}

.album ul li{
    width: calc(2);/*←画像を横に2つ並べる場合*/
    padding: 0 16px 16px 0;
    box-sizing:border-box;
}

.album ul li:nth-child(2n){
    padding: 0 0 16px 0;
}

/*会社概要
------------------------------*/
.table-about{
    box-sizing: border-box;
    max-width: 960px;
    min-width: 304px;
    margin: 0 auto;
    padding-bottom: 30px;
    font-size: 1.4rem;
    line-height: 1.5em;
}

.table-about table{
    width: 100%;
    border-collapse: separate;
}

.table-about th{
    box-sizing: border-box;
    padding: 16px;
    text-align: left;
    vertical-align: middle;
    font-weight: normal;
    border-top: solid 1px #000;
    background-color: #ccc;
}

.table-about td{
    box-sizing: border-box;
    width: 70%;
    padding: 16px;
    text-align: left;
    border-top: solid 1px #000;
}

.last-th{
    text-decoration: none;
    border-bottom: solid 1px #000;
}

.last-td{
    border-bottom: solid 1px #000;
}

/*お問い合わせ
------------------------------*/
.table-contact{
    box-sizing: border-box;
    max-width: 960px;
    min-width: 305px;
    padding-bottom: 30px;
    font-size: 1.4rem;
    line-height: 2em;
}

.table-contact table{
    width: 100%;
    border-collapse: separate;
}

.table-contact th{
    box-sizing: border-box;
    width: 25%;
    padding: 16px;
    text-align: left;
    vertical-align: top;
    font-weight: normal;
    border-top: solid 1px #666;
}

.table-contact td{
    box-sizing: border-box;
    width: 75%;
    padding: 16px;
    text-align: left;
    border-top: solid 1px #666;
}

.table-contact input[type="text"]{
    width: 60%;
    padding: 5px;
    font-size: 1.4rem;
}

.table-contact textarea{
    width: 60%;
    height: 200px;
    padding: 5px;
    resize: vertical;
}

.btn-out{
    width: 180px;
    margin: 0 auto;
}

.btn{
    width: 80px;
    height: 30px;
    cursor: pointer;
    font-size: 1.4rem;
    text-align: center;
    vertical-align: middle;/*ボタンの上下位置がずれるのでこれで合わせる*/
    border: 1px solid #666;
    border-radius: 6px;
}

.thanks{
    font-size: 1.6rem;
    padding: 0 0 30px 0;
}

/**幅417px-960px
------------------------------*/
@media screen and (max-width:959px) {
    /*共通項目
    ------------------------------*/
    #breadcrumb{
        padding-left: 16px;
        margin-bottom: 16px;
    }

    /*ヘッダー
    ------------------------------*/
    #menu-logo{
        padding: 0 16px 0 16px;
    }

    #gnav{
        display:none;
    }

    /*ハンバーガーメニュー*/
    #nav-drawer {
        display:block;
    }

    #nav-drawer {
        position: relative;
    }

    /*チェックボックス等は非表示に*/
    .nav-unshown {
        display:none;
    }

    /*アイコンのスペース*/
    #nav-open {
        display: inline-block;
        width: 30px;
        height: 22px;
        vertical-align: middle;
        padding-right: 16px;
    }

    /*ハンバーガーアイコンをCSSだけで表現*/
    #nav-open span, #nav-open span:before, #nav-open span:after {
        position: absolute;
        height: 3px;/*線の太さ*/
        width: 25px;/*長さ*/
        border-radius: 3px;
        background: #555;
        display: block;
        content: '';
        cursor: pointer;
    }
    #nav-open span:before {
            bottom: -8px;
    }
    #nav-open span:after {
        bottom: -16px;
    }

    /*閉じる用の薄黒カバー*/
    #nav-close {
        display: none;/*はじめは隠しておく*/
        position: fixed;
        z-index: 99;
        top: 0;/*全体に広がるように*/
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0;
        transition: .3s ease-in-out;
    }

    /*中身*/
    #nav-content {
        overflow: auto;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;/*最前面に*/
        width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
        max-width: 320px;/*最大幅（調整してください）*/
        height: 100%;
        background: #fff;/*背景色*/
        text-align: left;
        transition: .3s ease-in-out;/*滑らかに表示*/
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%);/*左に隠しておく*/
    }

    #nav-content ul{
        padding: 0 16px;
    }

    #nav-content ul li{
        display: block;
        margin-top: 16px;
        height: 40px;
    }

    /*チェックが入ったらもろもろ表示*/
    #nav-input:checked ~ #nav-close {
        display: block;/*カバーを表示*/
        opacity: .5;
    }

    #nav-input:checked ~ #nav-content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);/*中身を表示（右へスライド）*/
        box-shadow: 6px 0 25px rgba(0,0,0,.15);
    }

    #nav-content a:link{
        display: block;
        width: 224px;
        height: 24px;
        font-size: 2rem;
        color:#000;
        margin-bottom: 16px;
        padding: 12px 4px 8px 4px;
        border: #ccc 1px solid;
    }

    #nav-content a:visited{
        display: block;
        width: 224px;
        height: 24px;
        font-size: 2rem;
        color:#000;
        margin-bottom: 16px;
        padding: 12px 4px 8px 4px;
        border: #ccc 1px solid;
    }

    #nav-content a:hover{
        display: block;
        color:#fff;
        margin-bottom:
        border: #b7335b 1px solid;
        padding: 12px 4px 8px 4px;
        background-color: #b7335b;
    }

    #nav-content a:active{
        display: block;
        width: 224px;
        height: 24px;
        font-size: 2rem;
        color:#000;
        margin-bottom: 16px;
        padding: 12px 4px 8px 4px;
        border: #ccc 1px solid;
    }

    /*トップページ
    ------------------------------*/
    .top-contents{
        width: 424px;
        margin: 0 auto;
    }

    #slide-show{
        width: 424px;
        margin: 0 auto;
    }

    #slide-show img{
        width: 100%;
    }

    #slide-show .mask {
        width:424px;
        height:166px;
    }

    #slide-show ul{
        width:424px;
        height:166px;
    }

    #slide-show li{
        width:424px;
        height:166px;
    }

    .line-1024{
        width: 424px;
    }

    .column02{
        display: block;
    }

    .top-patent-l{
        width: 424px;
        margin: 0 auto;
        padding: 0 0 16px 0;
    }

    .top-patent-r{
        width: 424px;
    }

    .registration ul li img{
        width: 204px;
    }

    /*アンカー
    ------------------------------*/
    .page-top{
        width: 100%;
    }

    .page-top a:link{
        padding-right: 16px;
    }

    .page-top a:visited{
        padding-right: 16px;
    }

    .page-top a:hover{
        padding-right: 16px;
    }

    .page-top a:active{
        padding-right: 16px;
    }

    /*フッタ
    ------------------------------*/
    #fnav{
        width: 424px;
    }

    #fnav ul li{
        line-height: 1.5em;
    }

    #info-company{
        width: 424px;
    }
    #info-company p{
        padding-bottom: 1em;
    }

/*意匠登録
------------------------------*/
    #patent{
        display: block;
    }

    #patent-l{
        width: 288px;
        margin: 0 auto;
        padding: 0;
    }

    #patent-r{
        width: 100%;
    }

    .pad-16{
        padding: 0 16px;
    }


    .explanation{
        columns: unset;
        padding: 0 16px;
    }

    .zumen{
        margin: 0 auto;
    }

    .album {
        width: 472px;
    }

    .album ul{
        width: auto;
        display: block;
    }

    .album ul li{
        width: auto;
        padding: 0 0 16px 0;
    }
    /*お問い合わせ
    ------------------------------*/
    .thanks{
        padding: 0 16px 30px 16px;
    }
}

/*幅321px-416px
------------------------------*/
@media screen and (max-width:416px) {
    /*共通項目
    ------------------------------*/
    .download{
        width: 256px;
    }
    /*ヘッダ
    ------------------------------*/
    #menu{
        display: flex;
    }

    #menu-logo{
        width: 104px;
        padding-left: 16px;
    }

    #menu-logo img{
        width: 100%;
    }

    #menu-company{
        width: 176px;
    }

    #menu-company img{
        width: 100%;
    }

    /*トップページ
    ------------------------------*/
    .top-contents{
        width: 320px;
        margin: 0 auto;
    }

    #slide-show{
        width: 320px;
        margin: 0 auto;
    }

    #slide-show img{
        width: 100%;
    }

    #slide-show .mask {
        width:320px;
        height:125px;
    }

    #slide-show ul{
        width:320px;
        height:125px;
    }

    #slide-show li{
        width:320px;
        height:125px;
    }

    .line-1024{
        width: 320px;
        padding-bottom: 0;
    }

    .registration ul li img{
        width: 204px;
    }

    .top-patent-l{
        width: 320px;
    }

    .top-patent-r{
        width: 296px;
        margin: 0 auto;
    }

    .registration ul li{
        padding-right: 8px;
    }

    .registration ul li img{
        width: 156px;
    }

    /*フッタ
    ------------------------------*/
    #fnav{
        width: 296px;
        font-size: 2.4em;
    }

    #fnav ul li{
        padding-left: 0;
        display: block;
        line-height: 1.5em;
    }

    #info-company{
        width: 296px;
    }

    /*意匠登録
    ------------------------------*/
    #patent-l{
        width: 256px;
    }

    #patent-l img{
        width: 100%;
    }

    .zumen{
        width: 100%;
    }

    .zumen img{
        width: 100%;
        height: auto;
    }

    .album {
        width: 321px;
    }

    .album img{
        width: 100%;
        height: auto;
    }

    #patent-r th{
        display: block;
        width: 100%;
    }

    #patent-r td{
        display: block;
        width: 100%;
    }

    /*会社概要
    ------------------------------*/
    .table-about th{
        display: block;
        width: 100%;
        text-align: center;
    }

    .table-about td{
        display: block;
        width: 100%;
        text-align: center;
    }

    .last-th{
        border-bottom: none;
    }

    .last-td{
        border-bottom: solid 1px #000;
    }

    .cntr{
        width: 103px;
        margin: 0 auto;
    }

    .cntr-mp{
        width: 157px;
        margin: 0 auto;
    }

    /*お問い合わせ
    ------------------------------*/
    .table-contact th{
        display: block;
        width: 100%;
        text-align: center;
    }

    .table-contact td{
        display: block;
        width: 100%;
        text-align: center;
    }

    .table-contact input[type="text"]{
        width: 80%;
    }

    .table-contact textarea{
        width: 80%;
    }
}

/*幅0-320px
------------------------------*/
@media screen and (max-width:320px) {
    /*トップページ
    ------------------------------*/
    .registration ul li{
        padding-right: 0;
    }

    /*意匠登録
    ------------------------------*/
    #patent-l{
        width: 240px;
    }

    #patent-r{
        width: 304px;
    }
    .contents{
        min-width: 280px;
        margin: 0 auto;
    }

    /*意匠登録
    ------------------------------*/
}