@charset "utf-8";

/*============================
  ヘッダーアコーディオン（バルーン）
  ============================*/


/*====================↓アコーディオン====================*/


  /*-------------------
    アコーディオン（本体）
    -------------------*/
  #header_menu .accordion{
    position:relative; /*吹き出しの位置を固定するため親要素として設定*/
    z-index:10;
  }


  /*-------------------
    アコーディオン（内容）
    -------------------*/
  /*開いている状態*/
  #header_menu .accordion .content{
    width:180px;                /*横幅*/

    /*吹き出し位置*/
    position:absolute;          /*基準位置を設定（親要素）*/
    top: 80%;                   /*縦位置*/
    left:50%;                   /*横位置（親要素の中央位置に合わせる）*/
    transform:translateX(-50%); /*横位置（自要素の横幅の半分のみ左に移動）*/

    margin: 0px;
    padding: 0px;
    transition: height 0.2s; /*開閉アニメーションの速度*/
    overflow: hidden;        /*範囲外を隠す*/
  }
  /*閉じている状態*/
  #header_menu .accordion.close .content{
   height: 0px !important; /* 高さ『0px』が最優先に反映されるように『!important』を設定 */
  }





  /*---------------------
    アコーディオン（吹き出し）
    ---------------------*/

  /*吹き出し装飾*/
  .balloon{

    display: flex;
    justify-content: center;
    position: relative;


    width: 100%;
    margin-top: 15px;
    border-radius: 10px;
    background-color: white;
    padding: 5px 0px;

    font-size:1.1em;

    /*枠線*/
    border: 1.5px solid #333;
    box-sizing: border-box; /*横幅の中に線や余白を収める*/

    /*子要素の配置*/
    flex-direction: column; /*バルーン内の要素を上下に配置*/
  }

  /*吹き出し装飾（吹き出しに枠線を付けたい場合を考慮して四角形を使用）*/
  .balloon::before {

    content: '';
    position: absolute;

    /*位置の指定（本体の枠線にぴったり重ねるために調整）*/
    top: -11.5px;
    left: calc(50% - 10px); /* 中央配置 */

    /*四角形を描画（20px × 20px の正方形）*/
    width: 20px;
    height: 20px;
    background-color: white;

    /*枠線（左辺と上辺のみ線を引く）*/
    border-left: 1.5px solid #333;
    border-top: 1.5px solid #333;

    /*45度回転*/
    transform: rotate(45deg);

  }





  /*-----------------
    アコーディオンの内容
    -----------------*/
  #header_menu .accordion .content li a{
   display: block;
   margin: 10px;
   padding: 16px 12px 8px 12px;
   border-bottom: dashed 1px #342102;

   font-size: 0.9em;
   list-style: none;
   text-decoration: none;
   color: #342102;
   text-align: left;

  }

  #header_menu .accordion .content li a:hover{
   background-color: #FFDAB5;
  }

  #header_menu .accordion .content li:last-child a{
   border-bottom: none;
  }


/*====================↑アコーディオン====================*/