@charset "utf-8";

/*========= 基本レイアウト ===============*/

.nav_wrap{
    border: solid #ff0000 0px;
    width: 100%;
    background:transparent;
    position: relative;
    margin: 0 auto;
}

.test_nav{
  background:#30f;
  color:#fff;
  text-align: center;
}

/*========= ナビゲーションボタン幅 ==============*/

.homme_wide{ width:7%; }
.info_wide{ width:20%; }
.annai_wide{ width:15%; }
.guide_wide{ width:20%; }
.saiyou_wide{ width:12%; }
.guide2_wide{ width:26%; }

.non_line{
    border-left: dashed rgba(255,100,230,0.5) 0px ;
}

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

/*==ナビゲーション全体の設定*/
nav{
  background:#f0f0f0;
  color:#fff;
  text-align: center;
  position: relative;
  top:0px;
  left:0px;
}

/*ナビゲーションを横並びに*/
nav ul{
  background:#fff;
  border : solid #000000 0px;
  list-style: none;
  display: flex;
  justify-content: center;
  margin:0;
  padding:0;
}

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

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

/*ナビゲーションのリンク設定*/
nav ul li a{
  border-left: dashed rgba(255,100,230,0.5) 1px ;
  border-bottom: solid rgba(255,117,225,1.0) 1px ;
  display: block;
  text-decoration: none;
  color: #555;
  padding:16px 0px;
  transition:all .3s;
}

nav ul li li a{
  padding:10px 0px;
}

nav ul li a:hover{
  color:rgba(30,30,30,0.9);
  background:rgba(255,100,230,0.5);
}

/*==矢印の設定*/

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

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

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

/*下の階層を持っているulの指定*/
nav li.has-child ul{
  position: absolute;
  left:0;
  top:47px;
  z-index: 4;
  border : solid rgba(255,100,230,0.4) 1px;
  border-radius: 0px 0px 5px 5px;
  background:rgba(240,240,245,1.0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  width:100%;
  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{
  border-bottom:solid rgba(255,100,230,0.3) 1px ;
  border-left: dashed rgba(255,100,230,0.5) 0px ;
}

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,100,230,0.5);
}

/*==3階層目*/
nav li.has-child ul ul{
  top:0;
  left:180px;
  background:rgba(110,185,160,0.9);
}

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

/*========= スマホ用 ===============*/

@media screen and (max-width:768px){
  nav{
    margin-bottom: 0;
    padding-bottom: 0;
  }
  nav{
    padding: 0;
    width:100%;
    position: relative;
  }

  nav ul{
    display: block;
  }

  .nav_wrap{
    position: static;
  }

  header, .nav_wrap, .container_main_menu_pc{
    overflow: visible;
  }

  nav li.has-child ul,
  nav li.has-child ul ul{
    position: absolute;
    z-index: 9999;
    left:0;
    top:auto;
    width:96.5vw;
    visibility:visible;
    opacity:1;
    display: none;
    transition:none;
  }

  nav ul li a{
    width: 96.5vw;
    padding:10px 0px; /* ← ここで縦幅を狭くする */
    border-left: dashed rgba(255,100,230,0.1) 0px;
  }
  nav ul li li a{
    padding:8px 0px; /* ← 子メニューも少し狭く */
  }



  nav ul li.has-child::before{
    left:30px;
    top:20px;
  }

  nav ul ul li.has-child::before{
    transform: rotate(135deg);
    left:80px;
    top:15px;
  }

  nav ul li.has-child.active::before{
    transform: rotate(-45deg);
  }

}

/*========= レイアウト ===============*/

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

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

p{
  margin-top:0px;
}

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

section{
  padding:30px;
}

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