@charset "utf-8";


/*========================
  ヘッダーメニュー（PCサイズ）
  ========================*/


/*====================↓CSS変数を設定====================*/


  /*------------
    CSS変数を設定
    ------------*/
  :root {


    --width: 1100; /*ヘッダーメニューの横幅*/
    --height: 120; /*ヘッダーメニューの高さ*/

    --header-frame-width: calc(var(--width) * 1px);   /*「ヘッダーメニューの幅」*/
    --header-frame-height: calc(var(--height) * 1px); /*「ヘッダーメニューの高さ」*/





    /*---------------------------------------------------------------------------------------
      【説明】
       1100pxより画面サイズが小さくなった場合、ウィンドウのサイズから「ヘッダーメニューの高さ」の再計算を行う。
       以下の内容をコメントアウトをすれば、高さを変えずに横幅だけ狭くすることができる。
      ---------------------------------------------------------------------------------------*/

    @media (width <= 1100px){
    /*----------↓1100px以下の場合----------*/


      --header-frame-ratio:  calc(var(--height) / var(--width));      /*「ヘッダーメニューの比率」*/
      --header-frame-height: calc(100vw * var(--header-frame-ratio)); /*「ヘッダーメニューの高さ」*/


    /*----------↑1100px以下の場合----------*/
    }


  }


/*====================↑CSS変数を設定====================*/







/*====================↓ヘッダーメニュー（全体）====================*/


  #header_menu{

    max-width: var(--header-frame-width);
    height:    var(--header-frame-height);
    margin: auto;
    padding:10px;
    display: block flex; /*外側、内側*/

    /*--------------------------------------------------------------------------------
      【説明】
      "align-items" と "justify-content" は
      状況（flex-directionの値）によって水平、垂直の効果が入れ替わるので注意が必要

                                                  "align-items"   "justify-content"
      flex-direction: row（子要素横並び：初期値） ┃  垂直（上下）方向  ┃  水平（左右）方向
      flex-direction: column（子要素縦並び）     ┃  水平（左右）方向  ┃  垂直（上下）方向
      --------------------------------------------------------------------------------*/

    /*子要素の整列*/
    align-items: center; /*垂直（上下）方向、中央揃え*/

  }
  @media (width <= 834px){

    #header_menu{
      display: none;
    }

  }


/*====================↑ヘッダーメニュー（全体）====================*/







/*====================↓ヘッダーメニュー（ボタン）====================*/


  /*--------------------------------
    アコーディオンボタン or　リンクボタン
    --------------------------------*/

  #header_menu .accordion .button,
  #header_menu > a
  {

    height: var(--header-frame-height);

    /*選択不可*/
    user-select: none;

    /*子要素の整列（上下中央揃え）*/
    display: flex;
    align-items:center;
    justify-content:center;

    /*ボタン下線に必要*/
    position:relative;
  }

  /*リンク画像*/
  #header_menu .accordion .button img,
  #header_menu > a img
  {
    padding:10px 0px;
  }

  /*リンク名*/
  #header_menu .accordion .button .button_name,
  #header_menu > a .link_name
  {
   font-size: 1.1em;
   color:#342102;
  }
  #header_menu > a:hover .link_name{
   color:#FF972E;
  }

  /*三角▼*/
  #header_menu .accordion .button .triangle{
    padding:5px;
    color:#FF972E;
    transition: transform 0.2s;
    transform: rotateX(0deg);
  }
  #header_menu .accordion:hover .button .triangle{
    transition: transform 0.2s;
    transform: rotateX(180deg);
  }


/*====================↑ヘッダーメニュー（ボタン）====================*/







/*====================↓ヘッダーメニュー（区切り線）====================*/


  #header_menu .border {
   height: 100%;
   display:flex;

   /*子要素の整列*/
   flex-direction:column;  /*子要素を上下に配置*/
   align-items:center;
   justify-content:center;
  }

  #header_menu .border::before {
    content: '';
    height:90%;
    border-left: 2px solid #CACACA;
  }


/*====================↑ヘッダーメニュー（区切り線）====================*/







/*============================
  ヘッダーメニュー（モバイルサイズ）
  ============================*/


/*====================↓ヘッダーメニュー（全体）====================*/


  #header_menu_mobile{

    display: flex;
    padding:35px 20px 35px 10px;

  }
  @media (width >= 834px){

    #header_menu_mobile{
      display: none;
    }

  }


/*====================↑ヘッダーメニュー（全体）====================*/





/*====================↓ヘッダーメニュー（ロゴ）====================*/


  #header_menu_mobile .logo{

    max-width:200px;

  }

/*====================↑ヘッダーメニュー（ロゴ）====================*/