@charset "utf-8";
/************************************************************************************/
/* 【MainMenu】【SaikoujiとTempleGeneratorで共用(共通仕様)する】                    */
/* 【重要】【MainMenuを更新する場合は、まずSaikoujiでテストする。】                 */
/*         【その後、OKであればTempleGeneratorへコピーして使用する。】              */
/* 【重要】【.HamburgerMenu-togglerのleft: calc(800px - 50px + 28px);の、           */
/*         「+34px」は、Saikoujiの場合はつけて、TempleGeneratorの場合は外す】       */
/* 【機能】 SaikoujiとTempleGeneratorのMainMenu(メインメニュー)を定義               */
/************************************************************************************/

/* 【MainMenuに必要開始】 */


.MainMenu-nav{

	/*margin 上、右、下、左*/
	margin: 3.5px 3.5px 3.5px 3.5px;
	margin: 0px 0px 0px 0px;
	/*padding 上、右、下、左*/
	padding: 0px 0px 0px 0px;

    display: block;
    display: inline-flex;
    display: flex;

	box-sizing: border-box;
	position: relative;     /* 基準値とする */
	font-size:12px;

	white-space: nowrap;         /* 折り返しを防ぐために必要 */
	border-radius: 6px;
	border-radius: 0px;
	border: 1.5px solid #00F; /*線の太さ・色*/
	border: 0px solid #00F; /*線の太さ・色*/
	border-top: 2.5px solid #00F;
	border-bottom: 2.5px solid #66F;

	box-shadow:0 0 0 1px rgba(255,255,255,0.5) inset;
	text-shadow: 2px 2px 2px #080,-2px 2px 2px #080,2px -2px 2px #080,-2px -2px 2px #080,2px 2px 2px #080,-2px 2px 2px #080,2px -2px 2px #080,-2px -2px 2px #080;/*緑系*/
	text-shadow: 2px 2px 2px #800,-2px 2px 2px #800,2px -2px 2px #800,-2px -2px 2px #800,2px 2px 2px #800,-2px 2px 2px #800,2px -2px 2px #800,-2px -2px 2px #800;/*赤系*/
	text-shadow: 2px 2px 2px #008,-2px 2px 2px #008,2px -2px 2px #008,-2px -2px 2px #008,2px 2px 2px #008,-2px 2px 2px #008,2px -2px 2px #008,-2px -2px 2px #008;/*青系*/



}

/*********************/
/*FrameMenu4(青系) */
/*********************/

.MainMenu-nav {

	background-image: linear-gradient(0deg, #00F 0%,#008 80%, #008 90%,#00C 100%);
	background-image: linear-gradient(0deg, #DDF 0%,#44C 70%, #00F 85%, #00A 90%,#00A 100%);/*青系*/

}


/* ===== FrameMenuLeftとFrameMenuの共通定義 ===== */
.MainMenu-nav-item a{
	/*margin 上、右、下、左*/
	margin: 4px 0px 4px 0px;
	/*padding 上、右、下、左*/
	padding: 0px 7px 0px 7px;
	padding: 0px 0px 0px 0px;

	font-weight: none;
	text-decoration: none;
	text-shadow:1px 1px 0 rgba(255,255,255,1);
	border-radius: 5px;
	border-radius: 0px;
	color: #FFF;
	box-shadow:0 0 0 1px rgba(255,255,255,0.5) inset;
	background-image: linear-gradient(to bottom,
          rgba(180, 180, 180, 1.0),
          rgba(253, 253, 253, 1.0) 25%,
          rgba(240, 240, 240, 1.0) 30%,
          rgba(253, 253, 253, 1.0) 36%,
          rgba(225, 225, 225, 1.0) 50%,
          rgba(200, 200, 200, 1.0) 80%,
          rgba(170, 170, 170, 1.0)
          );
	border-top: 1.5px solid #EEE;
	border-left: 1.5px solid #EEE;
	border-right: 2.5px solid #222;
	border-bottom: 2.5px solid #222;


}


/* ===== 「FrameMenu a」には個別の定義 ===== */
.MainMenu-nav-item a{
	/*padding 上、右、下、左*/
	padding: 5px 4px 5px 4px;
	font-size : 16px ;
	font-size : 14px ;
	line-height: 1.2;/* <br>で改行した文字の改行間隔 */
	text-align: center;
}

/* ===== FrameMenuLeftとFrameMenuの共通定義(個別の定義は不要) ===== */
.MainMenu-nav-item a:hover,.MainMenu-nav-item a.Focus,.MainMenu-nav-item a.Focus:hover {
	color: #FF0;
	font-weight: bold;
	/* linear-gradientは、0degの場合、0%が下側で100%が上側。 */
	background-image: linear-gradient(0deg, #800 0%,#F00 20%, #F00 30%,#F88 100%);
	background-image: linear-gradient(0deg, #800 0%,#F00 10%, #F00 20%,#800 100%);
	background-image: linear-gradient(0deg, #A00 0%,#F00 10%, #F00 20%,#800 70%,#300 100%);

	border-top: 1.5px solid #200;
	border-left: 1.5px solid #200;
	border-right: 2.5px solid #F00;
	border-bottom: 2.5px solid #F00;
	border-top: 2.0px solid #200;
	border-left: 2.0px solid #200;
	border-right: 2.0px solid #F00;
	border-bottom: 2.0px solid #F00;

 transform: translate(1px,1px); /* 1px右へ、1px下へ移動 */

}

/*********************/
/*FrameMenu4(青系) */
/*********************/

.MainMenu-nav-item {

	/*margin 上、右、下、左*/
	margin: 3.5px 3.5px 3.5px 3.5px;
	margin: 0.5px 3.5px 0.5px 3.5px;
	/*padding 上、右、下、左*/
	padding: 0px 0px 0px 0px;
	box-sizing: border-box;
	border: none; /*囲み線は不要*/
	position: relative;     /* 基準値とする */
	font-size:12px;

	background-image: linear-gradient(0deg, #CCF 0%,#44C 70%, #00F 85%, #00A 90%,#00A 100%);/*青系*/
}

.MainMenu-nav-item a{
	text-shadow: 2px 2px 2px #080,-2px 2px 2px #080,2px -2px 2px #080,-2px -2px 2px #080,2px 2px 2px #080,-2px 2px 2px #080,2px -2px 2px #080,-2px -2px 2px #080;/*緑系*/
	text-shadow: 2px 2px 2px #800,-2px 2px 2px #800,2px -2px 2px #800,-2px -2px 2px #800,2px 2px 2px #800,-2px 2px 2px #800,2px -2px 2px #800,-2px -2px 2px #800;/*赤系*/
	text-shadow: 2px 2px 2px #008,-2px 2px 2px #008,2px -2px 2px #008,-2px -2px 2px #008,2px 2px 2px #008,-2px 2px 2px #008,2px -2px 2px #008,-2px -2px 2px #008;/*青系*/

}

/* ********************************** */

.MainMenu-nav-item {
    display: inline-block;
    display: inline-flex;
    text-align: left;
    margin-right: 3px;/* 隣のメニュー項目との間隔 */
    flex-shrink: 0;        /* つぶれ防止 */

}

.MainMenu-nav-item:last-child {
    margin-right: 0;/* 最後のメニュー項目の間隔 */

}

.MainMenu-nav-SubItem {


}

.MainMenu-nav-SubItem a{

	font-size:30px;
	font-size:12px;
	border:none;
	background: transparent;
	text-decoration: none;
	text-shadow: none;
	color:#000;
	/*border: 3.5px double #00F;*/ /*線の太さ・色*/

}

.MainMenu-nav-MainSubItem {

	/*margin 上、右、下、左*/
	margin: 0px 0px 0px 0px;
	/*padding 上、右、下、左*/
	padding: 5px 2px 5px 2px;
	border: 3.5px double #00F; /*線の太さ・色*/

}

.MainMenu-nav-MainSubItem a{


}


/* ****************************************************************************************** */
/* MainMenu-DropdownMainクラスは、Javascript(document.querySelectorAll)の中のみで使用される。 */
/* MainMenu-DropdownSubクラスは、Javascript(document.querySelectorAll)の中のみで使用される。  */
/* ****************************************************************************************** */

.MainMenu-DropdownMain {
    position: relative;


/* MainMenu-DropdownMainクラスは、Javascript(document.querySelectorAll)の中のみで使用される。 */

}

.MainMenu-DropdownSub {

/* MainMenu-DropdownSubクラスは、Javascript(document.querySelectorAll)の中のみで使用される。 */

}


.MainMenuShow-submenu .MainMenuSubmenu {
    opacity: 1;
    transform: translate(0, 25px) scale(1);
    transform: translate(0, 15px) scale(1);
    pointer-events: auto;
}

.MainMenuSubmenu {

    position: absolute;
    top: 100%;
    left: 50%;
    left: 0%;
    z-index: 100;
    width: 200px;
    width: 150px;
    margin-left: -100px;
    margin-left: 0px;
    background: #fff;
    border-radius: 3px;
    line-height: 1.46667;
/*    line-height: 1.0;*/
    margin-top: -5px;
    margin-top: -1px;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    opacity:0;

  display: flex;
  flex-direction: column; /* 縦並びの場合 */
  gap: 21px; /* pxがそのまま行間隔になる */
  gap: 17px; /* pxがそのまま行間隔になる */
  gap: 8px; /* pxがそのままメニュー項目の縦の行間隔になる */
  font-size:8px;

    transform: translate(0, 0)scale(.85);
    transform: translate(0, 0)scale(1);
    transform: translate(0, 0)scale(.1);
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transition: transform 0.3s linear, opacity 0.3s linear;
    transition: transform 0.2s linear, opacity 0.2s ease-out;

    pointer-events: none;

}

}

.MainMenuSubmenu::after, 
.MainMenuSubmenu::before {
    content: ""; 
    position: absolute;
    bottom: 100%;
    left: 50%;
    left: 30%;
    left: 25px;
    left: 5px;
    margin-left: -10px;
    border: 10px solid transparent;
    height: 0;
}

.MainMenuSubmenu::after {
    border-bottom-color: #fff;
    border-bottom-color: #000;
    border-bottom-color: #F00;
}

.MainMenuSubmenu::before {
    margin-left: -13px;
    border: 13px solid transparent;
    border-bottom-color: rgba(0,0,0,.1);
    -webkit-filter:blur(1px);
    filter:blur(1px);
}

.MainMenuSubmenu-items {
    list-style: none;
    padding: 10px 0;
}


/* 【MainMenuに必要終了】 */