@charset "utf-8";

/*=============
  ヘッダーメニュー
  =============*/


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


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


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

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


    /*-------------
      指定：〜1300px
      -------------*/

    /*大枠の幅（1300px）より画面サイズが小さくなった場合の設定*/
    @media print, screen and (max-width: 1300px) {


      /*---------------------------------------------------------------------------------------
        【説明】
         1300pxより画面サイズが小さくなった場合、ウィンドウのサイズから「ヘッダーメニューの高さ」の再計算を行う。
        ---------------------------------------------------------------------------------------*/

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


    }


  }


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







/*====================↓ヘッダーメニュー====================*/


  /*--------------
    ヘッダーメニュー
    --------------*/
  #header_menu{

    max-width: var(--header-frame-width);
    height:    var(--header-frame-height);
    margin: auto;


    /*---------------------------
      要素の外側と内側の表示種別の設定
      ---------------------------*/

    /*----------------------------------------------------------------------
      【説明】
       displayプロパティはそれ一つで "外側" と "内側" の両設定が行えるのがややこしい。
       何を設定するのか、考えを整理しておくことで理解がしやすくなる。

       外側の設定・・・自身がブロックボックスか、インラインボックスかを設定する。
       内側の設定・・・フローレイアウト（通常）か、グリッドか、フレックスかを設定する。
      -----------------------------------------------------------------------*/

    display: block flex; /*外側、内側*/

      /*『flex』設定時の子要素*/
      flex-direction : row;        /*方向*/
      flex-wrap      : nowrap;     /*折り返し*/
      justify-content: flex-start; /*水平方向の位置揃え*/
      align-items    : center;     /*垂直方法の位置揃え*/
  }





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


    /*-------
      親ボタン
      -------*/
    #header_menu .accordion .button {

      /*親ボタンの縦位置の調節*/
      /*----------------------------------------------------------------------------------------------------
        【説明】
         ボタンの縦位置を上下に調節したい場合、padding-top、heightの『0px』を設定している箇所を変更すれば、位置を調整できる。
         両方とも同じ数値を設定すること。
        ----------------------------------------------------------------------------------------------------*/
      margin-top:20px;
      height:calc(var(--header-frame-height) - 20px);

      text-align:center;
      cursor: default;
      user-select: none; /*テキスト選択不可*/
      position: relative;

      display:flex;
        justify-content:center;
        align-items:center;
    }

    /*オンマウス時の下線*/
    #header_menu .accordion .button::before {
     content: "";
     position: absolute;
     display: block;
     transition: 0.15s ease-out;

     /*線の位置*/
     bottom: 10%;
     left: 25%;

     /*線の装飾・サイズ*/
     background-color: #FF9B01; /*線の色*/
     opacity: 1;
     width: 50%;                /*線の長さ*/
     height: 4px;               /*線幅*/
    }
    @media print, screen and (max-width: 1050px) {
      #header_menu .accordion .button::before {
        opacity: 0.4;
      }
    }

    #header_menu .accordion.close .button::before {
     width: 50%;                /*線の長さ*/
     height: 0px;               /*線幅*/
    }
    #header_menu .accordion .button .button_name {
     display: block;
     margin-top: 10px;
     font-size: 0.7em;
     font-weight: bold;
    }





    /*-------------------
      アコーディオン（本体）
      -------------------*/
    /*開いている状態*/
    #header_menu .accordion .content{

     position: absolute; /*position:relativeを設定した祖先要素はなく、ウィンドウを基準としている*/
     top: ;
     width: 100%;
     left:0px;

     background: #FFF;
     transition: height 0.2s; /*開閉アニメーションの速度*/
     overflow: hidden;        /*範囲外を隠す*/

     z-index: 10;
    }
    /*閉じている状態*/
    #header_menu .accordion.close .content{
     height: 0px !important; /* 高さ『0px』が最優先に反映されるように『!important』を設定 */
    }


    /*-----------------------------
      アコーディオン（本体）上部の境界線
      -----------------------------*/
    #header_menu .accordion .content::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 10px;
      background-color: #01BCAA;
    }





    /*-------------------------------------------
      アコーディオンの内容（当院について、求人募集で使用）
      -------------------------------------------*/

    /*アコーディオン内容のフレーム*/
    #header_menu .accordion .content .content_frame{
      max-width: 900px;
      margin: auto;
      display: flex;
      padding: 30px 0px 30px 0px;
    }

    /*アコーディオン内容のフレーム（左側の写真枠）*/
    #header_menu .accordion .content .content_frame .content_frame_img{
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 200px;
    }

    /*アコーディオン内容のフレーム（中央のリンク枠）*/
    #header_menu .accordion .content .content_frame .content_frame_link{
      flex-grow: 1;
      flex-shrink: 0;
      padding: 10px 0px 0px 30px;
      color: #338C83;
    }
    /*ページ名*/
    #header_menu .accordion .content .content_frame .content_frame_link .content_frame_link_pagename{
      font-size: 1.1em;
      border-bottom: 2px solid #00BBA8;
      padding-bottom: 3px;
      margin-bottom: 10px;
      font-weight: bold;
    }
    #header_menu .accordion .content .content_frame .content_frame_link .content_frame_link_pagename a{
      color: #338C83;
    }
    #header_menu .accordion .content .content_frame .content_frame_link .content_frame_link_pagename a:hover{
      color: #FF9B01;
    }

    /*各リンク*/
    #header_menu .accordion .content .content_frame .content_frame_link ul li{
      font-size: 0.85em;
      height: 25px;
      margin: 0px 0px 5px 0px;
    }
    #header_menu .accordion .content .content_frame .content_frame_link ul li:last-child{
      margin: 0px;
    }
    #header_menu .accordion .content .content_frame .content_frame_link ul li a{
      width: 100%;
      height: 100%;
      display: block flex;
      justify-content:space-between;
      align-items: center;
      color: #338C83;
    }
    #header_menu .accordion .content .content_frame .content_frame_link ul li a:hover{
      text-decoration:none;
      color: #FF9B01;
    }

    /*アコーディオン内容のリンクの矢印*/
    #header_menu .accordion .content .content_frame .content_frame_link ul li a .arrow {
      position: relative;
      display: inline-block;
      padding: 10px;
    }
    #header_menu .accordion .content .content_frame .content_frame_link ul li a .arrow::before {
      content: '';
      width: 7px;
      height: 7px;
      border-top: solid 2px #338C83;
      border-right: solid 2px #338C83;
      position: absolute;
      right:10px;
      top: 4px;
    }
    #header_menu .accordion .content .content_frame .content_frame_link ul li a:hover .arrow::before{
      border-top: solid 2px #FF9B01;
      border-right: solid 2px #FF9B01;
    }
    #header_menu .accordion .content .content_frame .content_frame_link ul li a .arrow.arrow-right::before {
      transform: rotate(45deg);
    }


    /*アコーディオン内容のフレーム（左側のスペース）*/
    #header_menu .accordion .content .content_frame .content_frame_space{
      flex-grow: 0;
      flex-shrink: 1;
      flex-basis: 370px;
    }





    /*--------------------------------
      アコーディオンの内容（治療案内で使用）
      --------------------------------*/

    .content .content_frame .content_frame_column{
      flex-grow: 1;
      flex-basis: 33.33%;
    }
    .content .content_frame .content_frame_column a{
      display:flex;
      width:90%;
      margin:auto;
      margin-bottom:25px;
      padding-bottom:5px;
      border-bottom: 2px dashed #00BBA8;
      font-size:0.85em;
      color: #338C83;
    }
    .content .content_frame .content_frame_column a:last-child{
      margin-bottom:5px;
    }
    .content .content_frame .content_frame_column a:hover{
      text-decoration:none;
      color: #FF9B01;
    }
    .content .content_frame .content_frame_column a .item_img{
      width:70px;
      margin-right:15px;
      flex-grow:0;
      flex-shrink:0;
    }
    .content .content_frame .content_frame_column a .item_text{
      flex-grow: 1;
      align-self: center;
      line-height:1.3em;
    }


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





  /*------
    リンク
    ------*/
  #header_menu > a{
   height: var(--header-frame-height); /*「ヘッダーメニューの高さ」*/
   position: relative;
   margin-top:20px;
  }
  #header_menu > a p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform : translate(-50%,-50%);
    width: 100%;
    text-align: center;
  }
  #header_menu > a p .link_name{
   display: block;
   margin-top: 10px;
   font-size: 0.7em;
   color: #554434;
   font-weight: bold;
  }
  #header_menu > a:hover p .link_name{
   color: #01BCAA;
  }





  /*--------
    区切り線
    --------*/
  #header_menu .border {
   height: 100%;
   float: left;
   position: relative;
  }
  #header_menu .border::before {
    content: '';
    height:90%;
    border-left: 2px solid #CACACA;
    position: absolute;
    top: 50%;
    left: 50%;
    transform : translate(-50%,-50%);
  }


/*====================↑ヘッダーメニュー====================*/







/*====================↓アコーディオン表示時の背景====================*/


  #header_accordion_background{
    z-index: -1;
    position: absolute;
    left: 0px;
    width: 100%;
    height: ; /*JavaScript（js_menu__header.js）にて動的に設定*/
    background: rgba(0,0,0,0.1);
    animation: animation_fadein 0.2s; /* アニメーション */
  }

  #header_accordion_background.close{
    display: none;
  }


  @keyframes animation_fadein {
    0% {
      opacity: 0; /* 透明 */
    }
    100% {
      opacity: 1; /* 不透明 */
    }
  }


/*====================↑アコーディオン表示時の背景====================*/