@charset "utf-8";


/*----------------------*/
/*モーダルウィンドウメニュー*/
/*----------------------*/


/*---------*/
/*開閉ボタン*/
/*---------*/

/*--------------------↓開閉ボタン（モーダルウィンドウメニュー）--------------------*/


  /*---------------------------------*/
  /*開閉ボタン（モーダルウィンドウメニュー）*/
  /*---------------------------------*/

  #button_openclose_modalwindow_menu {

   /*ボタン表示『三』*/
   top: 20px;
   right: 15px;
   width: 40px;
   height: 40px;
   z-index:10001;
   position: fixed;


   background: rgba(     /*背景色を設定*/
                    255, /*R*/
                    255, /*G*/
                    255, /*B*/
                    1    /*A（透明度）*/
                    );
  }
  #button_openclose_modalwindow_menu.cross_mark{

   /*ボタン表示『Ｘ』*/
   border: 0.5px solid;
   border-color: #484848;
  }





  /*------------------------*/
  /* ボタン表示『三』（上の線） */
  /*------------------------*/

  #button_openclose_modalwindow_menu::before{
   position: absolute;
   top:10px;
   left:10px;
   content:"";
   width: 20px;
   height: 3px;
   background-color: #899B8D;
   transition: .2s;
  }
  #button_openclose_modalwindow_menu.cross_mark::before{
     top:19px;
     transform: rotate(-45deg);
     -webkit-transform: rotate(-45deg);
  }





  /*-------------------------*/
  /*  ボタン表示『三』（下の線） */
  /*-------------------------*/

  #button_openclose_modalwindow_menu::after{
   position: absolute;
   bottom:10px;
   left:10px;
   content:"";
   width: 20px;
   height: 3px;
   background-color: #899B8D;
   transition: .2s;
  }
  #button_openclose_modalwindow_menu.cross_mark::after{
   bottom:18px;
   transform: rotate(-135deg);
   -webkit-transform: rotate(-135deg);
  }





  /*----------------------------*/
  /*  ボタン表示『三』（真ん中の線） */
  /*----------------------------*/

  #button_openclose_modalwindow_menu span::after{
   position: absolute;
   top:18px;
   left:10px;
   content:"";
   width: 20px;
   height: 3px;
   background-color: #899B8D;
   transition: .2s;
   opacity: 1; /*要素の透明度*/
   pointer-events: none; /*クリックを無効化*/
  }
  #button_openclose_modalwindow_menu.cross_mark span::after {
   opacity: 0; /*要素の透明度*/
  }
.header_sp_main {
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
}
.header_sp_main li {
    width: 31.5%;

}
.header_sp_syosin {
    margin-bottom: 50px;
    padding-left: 20px;
    padding-right: 20px;
}
#modalwindow_menu .contents .header_sp_other {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
     padding-left: 20px;
    padding-right: 20px;
}

.header_sp_other li{
    width: 48%;
}

.header_sp_other li img{
    border-radius: 10px;
}

.header_sp_other_acc {
    margin-bottom: 10px;
    text-align: center;
     padding-left: 20px;
    padding-right: 20px;
}

.header_sp_other_job {
    margin-bottom: 10px;
    text-align: center;
     padding-left: 20px;
    padding-right: 20px;
}

.header_sp_other_acc img{
    border-radius: 10px;
}

.header_sp_other_job img{
    border-radius: 10px;
}
.header_sp_title {
    font-size: 1.6em;
    margin-bottom: 10px;
    line-height: 1.8em;
    color: #6A5145;
    font-weight: bold;
    text-align: center;
}

.modal_top{
    margin-top: 60px;
    text-align: center;
    color: #FFFFFF;
    font-weight: bold;
    background-color: #FF7597;
}

.modal_top a{
    color: #FFFFFF;
    font-weight: bold;
    display: block;
     padding-bottom: 20px;
    padding-top: 25px;
}
.modal_top img{
    width: 90%;
    font-size: 1.6em;
}

  /*指定：835px〜*/
  /*大枠の幅（835px）より画面サイズが大きい場合の設定*/
  @media print, screen and (min-width: 835px) {
    #button_openclose_modalwindow_menu {
      display: none;
    }
  }


/*--------------------↑開閉ボタン（モーダルウィンドウメニュー）--------------------*/







/*----------------------*/
/*モーダルウィンドウメニュー*/
/*----------------------*/

/*--------------------↓モーダルウィンドウメニュー--------------------*/


  /*--------------------------------------*/
  /*モーダルウィンドウ表示時、背景スクロールを固定*/
  /*--------------------------------------*/

  body:has(#modalwindow_menu.open){
    overflow-y: hidden; /* 縦スクロール（不可） */
  }
  /*指定：835px〜*/
  /*大枠の幅（835px）より画面サイズが大きい場合の設定*/
  @media print, screen and (min-width: 835px) {

   body:has(#modalwindow_menu.open){
     overflow-y: auto; /* 縦スクロール（可） */
   }
  }





  /*----------------------*/
  /*モーダルウィンドウメニュー*/
  /*----------------------*/

  #modalwindow_menu {

   top: 0;
   width: 100%;
   height: 100%;
   position: fixed;  /* 要素の配置方法 */
   overflow-y: auto; /*スクロール許可*/
   opacity: 0;       /*モーダルウィンドウ全体の透明度*/
   transition-duration: 0.3s;
   visibility: hidden; /*表示・非表示をアニメーションさせるため、"display" ではなく "visiblity" を採用*/
   z-index:10000;

   background: rgba(    /*背景色を設定*/
                    0,  /*R*/
                    0,  /*G*/
                    0,  /*B*/
                    0.7 /*A（透明度）*/
                    );

  }
  #modalwindow_menu.open {
   opacity: 1;
   visibility: visible;
  }





  /*----*/
  /*内容*/
  /*----*/

  #modalwindow_menu  > .contents {
    margin-top: 50px;
    margin-right: 20px;
    margin-left: 20px;
    margin-bottom: 50px;
    background: #FFF;
    padding-top: 40px;
  }





  /*指定：835px〜*/
  /*大枠の幅（835px）より画面サイズが大きい場合の設定*/
  @media print, screen and (min-width: 835px) {
   #modalwindow_menu {
     display: none;
   }
  }


/*指定：600px～ */
@media print, screen and (min-width: 600px) {
    .header_sp_title {
    font-size: 2.2em;
    color: #6A5145;
    font-weight: bold;
    line-height: 1.8em;
    text-align: center;
    }
}


/*--------------------↑モーダルウィンドウメニュー--------------------*/