@charset "utf-8";

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


/*--------
  body要素
  --------*/

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

body:has(#menu_modalwindow.open){
 overflow: hidden; /* 縦スクロール（不可） */
}


/*----------------------------------------------------
  【説明】
  ウィンドウの横幅が835以上の場合、縦スクロールの固定を解除
  ----------------------------------------------------*/

@media print, screen and (min-width: 835px) {

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





/*----------------------
  モーダルウィンドウボタン
  ----------------------*/

/*モーダルウィンドウボタン（本体）*/
#menu_modalwindow_button{

  position: fixed;
  top: 25px;
  right: 15px;

  width: 60px;
  height: 60px;

  display: block;
  justify-content:center;

  z-index:11;
  border-radius: 50%;
  background: #FF9701;
}
#menu_modalwindow_button:has(#three_lines.cross_mark){
  background: #777;
}

/*モーダルウィンドウボタン（三本線枠）*/
#three_lines{

  width: 40px;
  height: 40px;

 position: absolute;
 top: 50%;
 left: 50%;
 transform : translate(-50%,-70%);
 text-align: center;

}


/*三本線（上）*/
#three_lines::before{
 position: absolute;
 top:10px;
 left:10px;
 content:"";
 width: 20px;
 height: 3px;
 background-color: #FFF;
 transition: .3s;
}
#three_lines.cross_mark::before{
   top:19px;
   transform: rotate(-45deg);
}


/*三本線（下）*/
#three_lines::after{
 position: absolute;
 bottom:10px;
 left:10px;
 content:"";
 width: 20px;
 height: 3px;
 background-color: #FFF;
 transition: .3s;
}
#three_lines.cross_mark::after{
 bottom:18px;
 transform: rotate(-135deg);
}


/*三本線（中）*/
#three_lines span::after{
 position: absolute;
 top:18px;
 left:10px;
 content:"";
 width: 20px;
 height: 3px;
 background-color: #FFF;
 opacity: 1; /*要素の透明度*/
 pointer-events: none; /*クリックを無効化*/
 transition: .3s;
}
#three_lines.cross_mark span::after {
 opacity: 0; /*要素の透明度*/
}


/*モーダルウィンドウボタン（MENUテキスト）*/
#menu_modalwindow_button .menu_text{

 width: 40px;
 height: 20px;

 color: #FFF;
 font-size: 0.85em;

 position: absolute;
 top: 50%;
 left: 50%;
 transform : translate(-50%,45%);
 text-align: center;
 user-select: none;
}


/*----------------------------------------------------------------
  【説明】
  ウィンドウの横幅が835以上の場合、モーダルウィンドウボタンを非表示に設定
  ----------------------------------------------------------------*/

/*指定：835〜*/
@media print, screen and (min-width: 835px) {

  #menu_modalwindow_button{
    display: none;
  }
}







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

#menu_modalwindow {
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 position: fixed;
 z-index:10;

 overflow-y: auto; /*縦スクロール（可）*/

 opacity: 0;                /*透明度*/
 visibility: hidden;        /*表示・非表示をアニメーションさせるため、"display" ではなく "visiblity" を採用*/
 transition-duration: 0.3s; /*アニメーション時間 */

 background: rgba(    /*背景色を設定*/
                  0,  /*R*/
                  0,  /*G*/
                  0,  /*B*/
                  0.7 /*A（透明度）*/
                  );
}
#menu_modalwindow.open {
 opacity: 1; /*透明度*/
 visibility: visible;
}





/*--------------------
  モーダルウィンドウ（枠）
  --------------------*/

#menu_modalwindow .modalwindow_frame{
 margin:50px auto;
 padding: 20px 0px;
 background:#DEF2F1;

 width:500px;
 max-width:90%;
}





/*-------------------------------------
  モーダルウィンドウメニュー（アコーディオン）
  -------------------------------------*/

#menu_modalwindow .modalwindow_frame .accordion{
 padding: 10px;
 margin: 20px 30px 20px 30px;
 border: solid 1.5px #64A494;
 border-radius: 15px 15px 15px 15px;
	background-color: #FFF;
}





/*-----------------------------------------
  モーダルウィンドウメニュー（アコーディオンボタン）
  -----------------------------------------*/
#menu_modalwindow .modalwindow_frame .accordion .button{
 display:flex;
 position:relative;
 margin: 0px;
 padding: 0px;
 height:80px;
 color: #3A8581;
 text-decoration: none;
 user-select: none;
 text-align:center;
}
#menu_modalwindow .modalwindow_frame .accordion .button .name{
  font-size:1.2em;
  color: #3A8581;
  font-weight:bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform : translate(-50%,-50%);text-align: center;
}
#menu_modalwindow .modalwindow_frame .accordion .button .button_img{
  flex-grow:0;
  flex-shrink:1.5;
  width:80px;
  position:relative;
  padding:10px;
  margin-right:10px;
  margin-left:10px;
}
#menu_modalwindow .modalwindow_frame .accordion .button .button_img img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform : translate(-50%,-50%);text-align: center;
}
#menu_modalwindow .modalwindow_frame .accordion .button .button_space{
  flex-grow:1;
  flex-shrink:1;
  width:300px;
}
#menu_modalwindow .modalwindow_frame .accordion .button p{
 position: absolute;
 top: 50%;
 left: 50%;
 transform : translate(-50%,-50%);
 text-align: center;
}


/*-----------------
  アコーディオンの内容
  -----------------*/
/*開いている状態*/
#menu_modalwindow .modalwindow_frame .accordion ul{
 list-style: none;
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 text-decoration: none;
	background-color: #FFF;
 transition: height 0.2s; /*開閉アニメーションの速度*/
 overflow: hidden;        /*範囲外を隠す*/
}
/*閉じている状態*/
#menu_modalwindow .modalwindow_frame .accordion.close ul{
 height: 0px !important; /* クラスに『close』が設定されている場合、高さ『0px』が最優先に反映されるように『!important』を設定 */
}

/*アコーディオンの内容*/
#menu_modalwindow .modalwindow_frame .accordion ul li{
 display: block;
 margin: 0px 0px 0px 0px;
 padding: 5px 0px 5px 15px;
 border-bottom: dashed 1px #3A8581;
 position:relative;
}
#menu_modalwindow .modalwindow_frame .accordion ul li:first-child {
 padding-top: 15px;

}
#menu_modalwindow .modalwindow_frame .accordion ul li:last-child {
 padding-bottom: 0px;
 border-bottom: none;
}

/*リンク*/
#menu_modalwindow .modalwindow_frame .accordion ul li a{
 padding: 10px 20px 10px 0px;
 text-decoration: none;
 color: #3A8581;
 width:100%;

 display:flex;
 align-items:center; /*中央揃え（高さ）*/
}
#menu_modalwindow .modalwindow_frame .accordion ul li a::before {
 content: ">";
 font-weight: bold;
 margin-right:5px;
}
#menu_modalwindow .modalwindow_frame .accordion ul li .contents_item{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
#menu_modalwindow .modalwindow_frame .accordion ul li .contents_item .contents_item_name{
  width:400px;
  flex-grow:0;
  flex-shrink:2;
  padding:0px 10px 0px 0px;
  font-size:0.9em;
  line-height:1.3em;
}
#menu_modalwindow .modalwindow_frame .accordion ul li .contents_item .contents_item_img{
  width:90px;
  flex-grow:0;
  flex-shrink:1;
  padding-right:10px;
}





/*---------------------------------
  アイコンアニメーション（アコーディオン）
  ---------------------------------*/

/*アイコン*/
#menu_modalwindow .modalwindow_frame .accordion .button .icon{
 display: inline-block;
 width: 15px;
 height:10px;

 position: absolute;
 right: 15px; /*右寄せ*/
 top: 55%; /*上下中央*/
 -webkit-transform : translateY(-50%);
 transform : translateY(-50%);
}


/*線（左側『\』）*/
#menu_modalwindow .modalwindow_frame .accordion .button .icon::before {
 content: "";
 position: absolute;
 display: block;
 transition: 0.15s ease-out;

 /*線の位置*/
 top: 0px;
 left: 5px;

 /*線の装飾・サイズ*/
 background-color: #64A494; /*線の色*/
 width: 9px;                /*線の長さ*/
 height: 3px;               /*線幅*/
 transform:rotate(50deg)    /*角度*/
}

/*線のアニメーション（左側『\』）*/
#menu_modalwindow .modalwindow_frame .accordion.close .button .icon::before {
 width: 11px;
 transform: translateY(0px)
            translateX(-5px)
            rotate(50deg);
}


/*線（右側『/』）*/
#menu_modalwindow .modalwindow_frame .accordion .button .icon::after {
 content: "";
 position: absolute;
 display: block;
 transition: 0.15s ease-out;

 /*線の位置*/
 top: 0px;
 left: 0px;

 /*線の装飾・サイズ*/
 background-color: #64A494; /*線の色*/
 width: 9px;                /*線の長さ*/
 height: 3px;               /*線幅*/
 transform:rotate(-50deg)   /*角度*/
}


/*線のアニメーション（右側『/』）*/
#menu_modalwindow .modalwindow_frame .accordion.close .button .icon::after{
 width: 11px;
 transform: translateY(0px)
            translateX(5px)
            rotate(-50deg);
}





/*----------
  リンクボタン
  ----------*/
#menu_modalwindow .modalwindow_frame .modalwindow_button{
  display:block;
  padding: 10px;
  margin: 20px 30px 20px 30px;
  border: solid 1.5px #64A494;
  border-radius: 15px 15px 15px 15px;
  background-color: #FFF;
}
#menu_modalwindow .modalwindow_frame .modalwindow_button .button_content{
  display: flex;
  position: relative;
  margin: 0px;
  padding: 0px;
  height: 80px;
  color: #3A8581;
  text-decoration: none;
  user-select: none;
  text-align:center;
}
/*ボタン（画像）*/
#menu_modalwindow .modalwindow_frame .modalwindow_button .button_content .button_content_img{
  flex-grow:0;
  flex-shrink:1.5;
  width:80px;
  position:relative;
  padding:10px;
  margin-right:10px;
  margin-left:10px;
}
#menu_modalwindow .modalwindow_frame .modalwindow_button .button_content .button_content_img img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform : translate(-50%,-50%);
  text-align: center;
}
/*ボタン（スペース）*/
#menu_modalwindow .modalwindow_frame .modalwindow_button .button_content .button_content_space{
  flex-grow:1;
  flex-shrink:1;
  width:300px;
}
/*ボタン（名前）*/
#menu_modalwindow .modalwindow_frame .modalwindow_button .button_content .button_content_name{
  font-size:1.2em;color: #3A8581;font-weight:bold;position: absolute;top: 50%;left: 50%;transform : translate(-50%,-50%);text-align: center;
}