@CHARSET "UTF-8";

/**************************************/
/* 基本設定 */
/**************************************/
html,body  {
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    color: #363636;
    font-size:16px;
    background-color: #fff;
    font-family: 'Noto Sans JP','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Verdana, Arial, Helvetica, sans-serif;
}

#gmap{width:100%;height:600px;}

@media (min-width: 992px) {
    html,body {
        font-size:14px;
    }
}

a.btn{
    display:inline-block;
    background-color:#b6344a;
    color:#fff;
    padding:0.3em 1em;
}

a.btn:hover{color:#fff;}


/**************************************/
/* 見出し */
/**************************************/
h1{color:#000;font-size:1.1rem;font-weight: normal;}
h1 span{display: block;width:80%;margin-left:-4px;margin-bottom:5px;font-size:2.3rem;color:#e40012;text-transform: capitalize;}
h2 {font-size:1.3rem;color:#e40012;margin:3em 0 1.5em 0;}
h2 span{color:#696969;font-size:0.6em;margin:0.5em 0 0 0;display:block;}
h3 {font-size:1.1rem;color:#333333;}
h4{color:#e40012;font-size:1.2rem;}
h4 span{color:#3c3c3c;display:block;margin:0.5em 0;font-size:0.75em;border-top:1px solid #cdcdcd;padding:0.5em 0;}

a{color:#363636;text-decoration: none;}
a:hover{color:#e40012;}

@media (min-width: 992px) {
    h1{font-size:1rem;font-weight:100;}
    h1 span{width:50%;margin-left:-5px;margin-bottom:5px;}
    h2 {font-size:1.5rem;color:#e40012;}
    h2 span{color:#696969;font-size:0.6em;margin:0.5em 0 0 0;display:block;}
    h3 {font-size:1.3rem;color:#333333;}
    h4{font-size:1.35rem;}
    h4 span{margin-left:0.5em;font-size:1.1rem;display:inline-block;border:none;padding:0;}
    h4 span:before{content:"|";padding-right:0.5em;}
}

/**************************************/
/* パンクズ */
/**************************************/
.breadcrumbs{list-style:none;margin:2rem 0;padding:0;font-size:0.9rem;color:#000;}
.breadcrumbs a:link { color: #000; text-decoration: none;}
.breadcrumbs a:visited { color: #000; text-decoration: none;}
.breadcrumbs a:hover { color: #000; text-decoration: none; padding-bottom:3px; border-bottom:1px solid #000;}
.breadcrumbs a:active { color: #000;text-decoration: none; border-bottom:1px solid #000;}

/**************************************/
/* 通常ページ */
/**************************************/
.page-content{
    margin:0 0 10em 0;
    padding:0 0.5rem;
}

.split-2 > li,
.split-2 > div{width:100%;}

@media (min-width: 992px) {

    .split-2 > li,
    .split-2 > div{width:50%;}
}

/**************************************/
/* 通常ページヘッダ */
/**************************************/
.page-header {padding:2.5rem 0.5rem;margin-top:80px;}
.page-header .f0{position:relative;}
.page-header .f1{width:90%;}
.page-header .f2{display:none;}
.page-header .f3{width:100%;z-index:9999;}

.page-header .f2 span{border-top:1px solid #000;width:100%;display:inline-block;}
.page-header .f3 span{display:inline-block;border-radius: 50%;width:40px;height:40px;background-color:#e40012;position:absolute;top:-10px;right:0;font-size:20px;color:#fff;text-align:center;padding-top:5px;}

.page-header .h-menu{position:absolute;top:55px;left:0;width:100%;background-color:#e40012;list-style:none;margin:0;padding:2em 0;display:none;}
.page-header .h-menu li{margin:0 0 2rem 0;text-align:center;}
.page-header .h-menu li:last-child{margin:0;}
.page-header .h-menu a:link { color: #fff; text-decoration: none;}
.page-header .h-menu a:visited { color: #fff; text-decoration: none;}
.page-header .h-menu a:hover { color: #fff; text-decoration: none; padding-bottom:3px; border-bottom:1px solid #e40012;}
.page-header .h-menu a:active { color: #fff;text-decoration: none; border-bottom:1px solid #e40012;}

@media (min-width: 992px) {
    .page-header .f0{padding:100px 100px;}
    .page-header .f1{width:380px;}
    .page-header .f2{width:320px;display:block;}
    .page-header .f3{width:calc(100% - 700px);display:block;}

    .page-header .f3 span{display:none;}

    .page-header .h-menu{position: static;top:0;left:0;width:auto;background-color: transparent;padding:0;display: block;}
    .page-header .h-menu li{margin:0 0 2rem 0;text-align:left;}
    .page-header .h-menu a:link { color: #e40012; text-decoration: none;}
    .page-header .h-menu a:visited { color: #e40012; text-decoration: none;}
    .page-header .h-menu a:hover { color: #e40012; text-decoration: none; padding-bottom:3px; border-bottom:1px solid #e40012;}
    .page-header .h-menu a:active { color: #e40012;text-decoration: none; border-bottom:1px solid #e40012;}

}

.breadcrumbs .category{
    display:inline-block;
}

/**************************************/
/* キャッチコピー */
/**************************************/
.catch {
    font-size: 14px;
    margin: 2em 0;
    padding: 0;
    display: block;
    text-align:center;
}
.catch span {color: #e40012;}

@media (min-width: 992px) {
    .catch {
        font-size: 12px;
        margin: 0.5em 0;
        padding: 0;
        display: block;
        text-align: center;
    }
}

/**************************************/
/* ミッション */
/**************************************/
.mission{
    background-image: url('/wp-content/uploads/mission_back.png');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center top;

}
.mission h3 img{margin-top:-10px;margin-left:-0.2em;}
.mission h3 span{color:#363636;margin-left:0.5em;display:inline-block;}
.mission ul{list-style:none;margin:180px 0 100px 0;padding:0;}
.mission li{margin-bottom:100px;}
.mission dl{}
.mission dt{}
.mission dd{}
@media (min-width: 992px) {
    .mission{
        background-size:contain;
    }
}


/**************************************/
/* ニュース */
/**************************************/
ul.news{
    list-style:none;
    margin:0;
    padding:0;
}

ul.news li{
    margin:4em 0;
    padding:0.2em 0;
    border-bottom:1px solid #aaaaaa;
}

ul.news dl{
    margin:0;
    padding:0;
    display:flex;
    flex-wrap: wrap;
}
ul.news dt{margin:0 3em 0 0;padding:0;font-weight: normal;}
ul.news dd{margin:0;padding:0;font-weight: normal;}

ul.news a{color:#363636;text-decoration: none;}
ul.news a:hover{color:#e40012;}

/**************************************/
/* 製品情報（製品群） */
/**************************************/
ul.products{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

ul.products li{
    width:100%;
}

ul.products dt div{
    background-color:#696969;
    width:100%;
    height:320px;
}

ul.products p{
    margin:0 0 0.2em 0;
    padding:0;
}

.img-products img{
    width:100%;
    height:320px;
    object-fit: cover;
}



@media (min-width: 992px) {
    ul.products dt div{
        height:320px;
    }

    ul.products li{
        width:48%;
    }

    ul.products p{
        margin:0 0 0.2em 0;
        padding:0;
    }
}

/**************************************/
/* 製品情報 */
/**************************************/
.product-list{list-style:none;padding:0;margin:0;}
.product-list li{display:flex;flex-wrap:wrap;margin-bottom:5em;}
.product-list p{margin:0;padding:0;}
.product-list p.text-right{text-align:right;}
.product-list .left{background-color:#f5f5f5;width:100%;height:320px;}
.product-list .right{width:100%;position: relative;margin-top:20px;}
.product-list table{width:100%;margin-top:20px;}
.product-list tr{}
.product-list th{background-color:#333;color:#fff;padding:0.3em 0.3em;}
.product-list td{padding:0.3em;}
.product-list a.btn{
    display:inline-block;
    background-color:#b6344a;
    color:#fff;
    padding:0.5em 1em;
    position:absolute;
    right:0;
    top:-62px;
}

.img-product-list img{
    width:100%;
    height:320px;
    object-fit: cover;
}

.img-pos-mb img{
    object-position:0 65%;
}

@media (min-width: 992px) {

    .product-list .left{width:385px;height:220px;margin-right:15px;}
    .product-list .right{width:calc(100% - 400px);margin-top:0;}
    .product-list a.btn{top:0;}

    .img-product-list img{
        height:220px;
    }
}

/**************************************/
/* 企業情報 */
/**************************************/
ul.about{width:100%;}
ul.about li{margin:3em 0;}
ul.about dl{
    display:flex;
    flex-wrap: wrap;
    margin:0;
    padding:0;
}
ul.about dt{width:100%;}
ul.about dd{width:100%;}

@media (min-width: 992px) {
    ul.about dt{width:300px;}
    ul.about dd{width:calc(100% - 300px);}
}

/**************************************/
/* メニュー */
/**************************************/
#g-nav{
    position:fixed;
    z-index: 999;
    top:0;
    right: -120%;
    width:100%;
    height: 100vh;
    background:#fff;
    transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panel-active{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panel-active #g-nav-list{
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul.menu {
    z-index: 999;
    list-style: none;
    margin:0;
    padding:30px 0;
}

/*リストのレイアウト設定*/
#g-nav ul.menu li{
    text-align: center;
    padding:15px 0;
}

#g-nav ul.menu li a{
    color: #000;
    text-decoration: none;
    display: block;
}

@media (min-width: 576px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {

    #g-nav{
        position:static;
        height:auto;
        width:auto;
        background-color:transparent;
    }

    #g-nav ul.menu{
        display:flex;
        padding:0;
    }

    #g-nav ul.menu li{
        padding:0;
        margin-right:22px;
    }

    #g-nav-list {
        display:flex;
        align-items:center;
    }
}
@media (min-width: 1200px) {
}



/*****************************************/
/*　スマホ用　ハンバーガーメニューボタン */
/*****************************************/
.btnMenuOpen {
    cursor: pointer;
    width: 34px;
    height: 26px;
    margin:3px;
    z-index:9999;
    position:relative;
}
.btnMenuOpen,
.btnMenuOpen span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}
.btnMenuOpen span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #363636;
}
.btnMenuOpen span:nth-of-type(1) {
    top: 0;
}
.btnMenuOpen span:nth-of-type(2) {
    top: 12px;
}
.btnMenuOpen span:nth-of-type(3) {
    bottom: 0;
}
.btnMenuOpen.active span:nth-of-type(1) {
    -webkit-transform: translateY(12px) rotate(-45deg);
    transform: translateY(12px) rotate(-45deg);
}
.btnMenuOpen.active span:nth-of-type(2) {
    opacity: 0;
}
.btnMenuOpen.active span:nth-of-type(3) {
    -webkit-transform: translateY(-12px) rotate(45deg);
    transform: translateY(-12px) rotate(45deg);
}