@charset "utf-8";

/*========= ナビゲーションドロップダウンのためのCSS ===============*/

/*==ナビゲーション全体の設定*/
#nav1{
    /* background:#333; */
    color:#fff;
    text-align: center;
    margin-top: 50px;
}
/*ナビゲーションを横並びに*/
#nav1 ul{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 12px;
    list-style: none;
    display: flex;
    /* justify-content: center; */
    margin-top: 0px
}
/*2階層目以降は横並びにしない*/
#nav1 ul ul{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 12px;
    display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
#nav1 ul li{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 12px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    /*  width:100%;  */
}

/*ナビゲーションのリンク設定*/
#nav1 ul li a{
    display: block;
    text-decoration: none;
    color: #000;
    padding:20px 35px;
    transition:all .3s;
    font-size: 13px
}

#nav1 ul li li a{
    padding:10px 35px;
}

#nav1 ul li a:hover{
    color:#000;
    font-weight:bold;
    text-decoration: underline;
}

/*==矢印の設定*/

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

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

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
#nav1 li.has-child ul{
    /*絶対配置で位置を指定*/
    position: absolute;
    left:0;
    top:52px;
    z-index: 4;
    /*形状を指定*/
    background:#28BFE7;
    /*はじめは非表示*/
    visibility: hidden;
    opacity: 0;
    /*アニメーション設定*/
    transition: all .3s;
    /*  width:180px; */
    width : 250px;
    text-align: left
}

/*hoverしたら表示*/
#nav1 li:hover > ul,
#nav1 li:active > ul,
#nav1 li:active > ul{
  visibility: visible;
  opacity: 1;
}

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

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

#nav1 li.has-child ul li a:hover,
#nav1 li.has-child ul li a:active{
    background:#3577CA;
}


/*==3階層目*/

/*3階層目の位置*/
#nav1 li.has-child ul ul{
    top:0;
    left:250px;
    width:260px;
    background:#66ADF5;
}

#nav1 li.has-child ul ul li a:hover,
#nav1 li.has-child ul ul li a:active{
    background:#448ED3;
}
.openbtn{
    position: relative;         /*ボタン内側の基点となるためrelativeを指定*/
    background:#666;
    cursor: pointer;
    width: 50px;
    height:50px;
    border-radius: 5px;
    display:none;
}

/*==568px以下の形状*/
p{
    margin-top:20px;    
}

@media screen and (max-width:568px){
    #nav1{
        padding: 0;
        display: none;
        margin-top: 4px;
    }
    
    #nav1 ul{
        display: block;
        flex-direction: column;
    }
    
    /*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
    .openbtn{
        position: relative;         /*ボタン内側の基点となるためrelativeを指定*/
        background:#634441;
        cursor: pointer;
        width: 50px;
        height:50px;
        border-radius: 5px;
        display:block;
        margin-top: -6px;
    }
    
    /*ボタン内側*/
    .openbtn span{
        display: inline-block;
        transition: all .4s;/*アニメーションの設定*/
        position: absolute;
      }
    
    .openbtn span:nth-of-type(1),
    .openbtn span:nth-of-type(3) {
        height: 2px;
    	background: #fff;
      	width: 62%;
        left: 10px;
     }
    
    .openbtn span:nth-of-type(1) {
    	top:13px;	
    }
    
    .openbtn span:nth-of-type(2) {
    	top:19px;
    	left:11px;
    	font-size:0.6rem;
    	text-transform: uppercase;
    	color: #fff;
    }
    
    .openbtn span:nth-of-type(3) {
    	top:36px;
    }
    
    /*activeクラスが付与されると線が回転して×になり、Menu表記をしている2つ目の要素が透過して消える*/
    .openbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }
    
    .openbtn.active span:nth-of-type(2) {
    	opacity: 0;
    }
    
    .openbtn.active span:nth-of-type(3){
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }

    #nav1 li.has-child ul,
    #nav1 li.has-child ul ul{
       position: relative;
       left:0;
       top:0;
       width:100%;
       visibility:visible;             /*JSで制御するため一旦表示*/
       opacity:1;                      /*JSで制御するため一旦表示*/
       display: none;                  /*JSのslidetoggleで表示させるため非表示に*/
       transition:none;                /*JSで制御するためCSSのアニメーションを切る*/
    }
    p{
       margin-top:2px;    
    }
    
    #nav1 ul li{ 
       width:100%;
    }


}
    
#nav1 ul li a{
   /*  border-bottom:1px solid #ccc;   */
}

/*矢印の位置と向き*/

#nav1 ul li.has-child::before{
    left:20px;    
}

#nav1 ul ul li.has-child::before{
    transform: rotate(135deg);
    left:20px;
}
    
#nav1 ul li.has-child.active::before{
    transform: rotate(-45deg);
}

}


/*========= レイアウトのためのCSS ===============*/

h1{
    font-size:2rem;
    text-align: center;
    text-transform: uppercase;
    padding: 20px;
}

h2{
    font-size:1.2rem;
    text-align: center;
    margin: 0 0 30px 0;
}


small{
    background:#333;
    color:#fff;
    display: block;
    text-align: center;
    padding:20px;
}


section{
    padding:30px;
}

section:nth-child(2n){
    background:#f3f3f3;    
}