@charset "utf-8";

/************************************************
 import css (ポップアップ用)
************************************************ */
@import url("./set.css");
@import url("./common.css");

@import url("./bloc.css");
@import url("./reset.css");

/*
@import url("./contents.css");
@import url("./bloc_alpha.css");
@import url("./table.css");
@import url("./popup_import.css");
@import url("./f.css");
@import url("./print.css");
*/


/*==================================================
パソコンとスマホ兼用グローバルナビゲーション設定
==================================================*/

/*==ナビゲーション全体の設定*/
nav{
    background:rgba(175,238,238,0.4);
    text-align: left;
    position:fixed;
    z-index:999;
    width: 100%;
}

/*ナビゲーションを横並びに*/
nav ul{
    list-style: none;
    display: flex;
    justify-content: center;
}

/*2階層目以降は横並びにしない*/
nav ul ul{
    display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
    position: relative;
}

/*ナビゲーションのリンク設定*/
nav ul li a{
    display: block;
    text-decoration: none;
    /* paddingの一番目のパラメータがリンクの上下位置で2番目が左右幅 */
    padding:10px 35px;
    transition:all .3s;
}

nav ul li li a{
    padding:5px 25px;
}

nav ul li a:hover{
    /* color:#fff;*/
    /* color:#000000;*/
}

/*==矢印の設定*/

/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before{
    content:'';
    position: absolute;
    left:5px;
    top:15px;
    width:6px;
    height:6px;
    border-top: 2px solid #000000;
    border-right:2px solid #000000;
    transform: rotate(135deg);
}

/*3階層目を持つliの矢印の設定*/
nav ul ul li.has-child::before{
    content:'';
    position: absolute;
    left:6px;
    top:10px;
    width:6px;
    height:6px;
    border-top: 2px solid #000000;
    border-right:2px solid #000000;
    transform: rotate(45deg);
}

/*== 2・3階層目の共通設定 */
/*下の階層を持っているulの指定*/
nav li.has-child ul{
    /*絶対配置で位置を指定*/
    position: absolute;
    left:0;
    top:36px; /*子ナビが表示される上下位置の指定*/
    z-index: 999;
    /*形状を指定*/
    background:#e5fafa;
    width:400px;/*子ナビの幅初期値180px*/
    /*はじめは非表示*/
    visibility: hidden;
    opacity: 0;
    /*アニメーション設定*/
    transition: all .3s;
}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a{
    /*color:#000000;*/
    border-bottom:solid 1px rgba(255,255,255,0.6);
}

nav li.has-child ul li:last-child a{
    border-bottom:none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
    background:rgba(255,255,255,0.2);
}

/*==3階層目*/
/*3階層目の位置*/
nav li.has-child ul ul{
    top:0;
    left:182px;
    background:#f5ffff;
}

nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active{
    background:rgba(255,255,255,0.2);
}

.nav-moji {
    font-size:15px;
    font-weight: bold;
}

.menu-moji {
    font-size:14px;
    font-weight: bold;
}

.title-moji {
    font-size:18px;
    font-weight: bold;
}


.nav-home {
    width:  120px;
    height: 36px;
    color:#000000;
}

.nav-menu {
    width:  135px;
    height: 36px;
    color:#000000;
}

.nav-kukaku {
    width:  170px;
    height: 36px;
    color:#000000;
}

.nav-type {
    width:  135px;
    height: 36px;
    color:#000000;
}

.nav-catalog {
    width:  170px;
    height: 36px;
    color:#000000;
}

.nav-zaiko {
    width:  135px;
    height: 36px;
    color:#000000;
}

.nav-mail {
    width:  185px;
    height: 36px;
    background:#158fb7;
    color:#FFFFFF;
}

.spview {
    display: none;
}


/* 表示領域が800px未満の場合に適用するスタイル */
@media screen and (max-width:800px){

    nav{
        display: none;
    }
    
    .spview {
        display: block;    
        background:rgba(175,238,238,0.4);
        text-align: left;
        position:fixed;
        z-index:999;
        width: 100%;
    }
    
    /*ナビゲーションを横並びに*/
    .spview ul{
        list-style: none;
        display: flex;
        justify-content: center;
    }
    
    /*下の階層のulや矢印の基点にするためliにrelativeを指定*/
    .spview ul li{
        position: relative;
    }
    
    /*ナビゲーションのリンク設定*/
    .spview ul li a{
        display: block;
        text-decoration: none;
        color: #FFFFFF;
        /* paddingの一番目のパラメータがリンクの上下位置で2番目が左右幅 */
        padding:10px 35px;
        transition:all .3s;
    }

}