/* 
- Name: megamenu.js - style.css
- Version: 1.0
- Latest update: 29.01.2016.
- Author: Mario Loncarek
- Author web site: http://marioloncarek.com
*/


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Body - not related to megamenu
–––––––––––––––––––––––––––––––––––––––––––––––––– */

* {  box-sizing: border-box;}

a { color: #000;}

.description {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
megamenu.js STYLE STARTS HERE
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Screen style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.menu-container {
    width: 100%; /*80%;*/
    margin: 20px auto 0 auto!important;
    background: #F3c543;/* #db443c;*/
		position: fixed;
		z-index: 99998; /*z-index: 2;*/}


.menu-mobile {
    display: none;
    padding: 0; /*padding: 20px*/}

.menu-mobile:after {
	content: '\f0c9';
	font-family: 'FontAwesome';
   /* content: "\f394";
    font-family: "Ionicons";*/
    font-size: 2.5rem;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}

.menu-dropdown-icon:before {
	content: '\f067';
	font-family: 'FontAwesome';
   /* content: "\f489";
    font-family: "Ionicons";*/
    display: none;
    cursor: pointer;
    float: right;
    padding: 1.5em 2em;
    background: #fff;
    color: #333;
}

.menu > ul {
    margin: 0 auto;
    width: 80%; /*80%;*/
    list-style: none;
    padding: 0;
    position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    box-sizing: border-box;
}

.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table;
}

.menu > ul:after {
    clear: both;
}

.menu > ul > li {
    float: left;
    background: #F3c543;/* #db443c;*/
    padding: 0;
    margin: 0;
}

.menu > ul > li a {
    color: #000;
		text-decoration: none;
    padding: 1.0em 1.5em;/*1.5em 3em;*/
    display: block;
		font-family: 'Noto Sans JP',"メイリオ","Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
		font-weight: bold;
		font-size: 1.1em!important;
}

/*---------------------------------header logo */
.menu > ul > li#logo { padding: 0!important; margin: 0!important;}

.menu > ul > li#logo a  {
    text-decoration: none;
    padding: 0!important; margin: 0!important;
    display: block;
}
.menu > ul > li:hover {
    background: #5FC2D6;
}

.menu > ul > li > ul {
    display: none;
    width: 100%;
    background:#5FC2D6;
    padding: 10px;/*20px*/
    position: absolute;
    z-index: 99999; /*z-index: 99;*/
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
    width: 25%;
    background: none;
    float: left;
		font-weight: normal!important;
}

.menu > ul > li > ul > li a {
    color: #000;
    padding: .2em 10px;
    width: 95%;
    display: block;
    border-bottom: 1px solid #EFEFEF;
		font-weight: normal!important;
}

.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li > ul > li {
    float: left;
    width: 100%;
    padding: 10px;
    margin: 0;
    font-size: 1.0em;
}

.menu > ul > li > ul > li > ul > li a {
    border: 0;
}

.menu > ul > li > ul.normal-sub {
    width: 300px;
    left: auto;
    padding: 10px 20px;
}

.menu > ul > li > ul.normal-sub > li {
    width: 100%;
}

.menu > ul > li > ul.normal-sub > li a {
    border: 0;
    padding: 1em 0;
}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
  iPad and smartphone landscape
–––––––––––––––––––––––––––––––––––––––––––––––––– */

 /* min-width 641px and max-width 1199.98px, use when QAing tablet-only issues */
 /* 2026-07-21変更: 境目を1024px→1200pxへ。iPad横向き(1080/1180/1194px)でデスクトップ用
    メニューが出てヘッダーが2段になっていたため。あわせてem→px指定に変更
    （em指定はブラウザの標準文字サイズに換算が左右され、境目がズレるため）。
    ※js/megamenu.js の 1200 判定と必ず揃えること */
@media only screen and (min-width: 641px) and (max-width: 1199.98px) {
	.menu-container {
    width: 100%;
		margin: 20px auto 0 auto!important;
		position: fixed;
		z-index: 1!important;
		max-height: 65px!important;}

	.menu-mobile {
    display: block;
    position: relative;      /* ☰ の縦センター配置の基準 */
    min-height: 65px;        /* ヘッダー高さ（max-height:65px）に合わせる */
    padding-top: 0!important;
		padding-right: 10px!important;}

	/*追加ここから*/
	/* ハンバーガー（☰）をヘッダー内で縦センター・右端に固定（2026-07-17）
	   旧: float+top:-35pxで無理やり引き上げ→高さとズレていたのを絶対配置の中央揃えに */
	.menu-mobile:after {
		content: '\f0c9';
		font-family: 'FontAwesome';
    font-size: 2.5rem;
    line-height: 1;
    color: #000;
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
	}
	/*＋ 右端・上端固定（floatだと文字数で位置が揺れるため絶対配置 2026-07-17）
	   ※top:50%だとメニュー展開時にliが伸びて中央＝サブメニューの奥に隠れるため上端固定 */
	.menu-dropdown-icon { position: relative; }
	.menu-dropdown-icon:before {
		content: '\f067';
		font-family: 'FontAwesome';
    display: none;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0.6em 1.0em;
    background: #fff;
    color: #333;
    z-index: 2;}
	/* 開いているメニューは右端・上端に「−」（クリックで閉じる） */
	.menu-dropdown-icon.submenu-open:before { content: '\f068'; }

	.menu > ul {
    margin: 0 auto;
    width: 100%!important;
    list-style: none;
    padding: 0!important;
    position: relative;
    box-sizing: border-box;}

	/*追加ここまで*/

    .menu-dropdown-icon:before {
        display: block;
    }
    .menu > ul {
        display: none;
    }
    .menu > ul > li {
        width: 100%!important;
        float: none;
        display: block;
    }
    .menu > ul > li a { font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
        padding: 0.6em!important;/*padding: 1.5em;*/
        width: 100%!important;
        display: block;
    }
    .menu > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul.normal-sub {
        width: 100%!important;
    }
    .menu > ul > li > ul > li {
        float: none;
        width: 100%!important;
        /*margin-top: 20px;*/
				margin-top: 0!important;
    }
    .menu > ul > li > ul > li:first-child {
        margin: 0;
    }
    .menu > ul > li > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul > li > ul > li {
        float: none;
    }
    .menu .show-on-mobile {
        display: block;
    }

}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (max-width: 40em) {

	.menu-container {
    width: 100%;
		/*position:relative!important;*/
		position: fixed;
		z-index: 99998; /*z-index: 1;*/
		max-height: 65px!important;}

	.menu-mobile {
    display: block;
    position: relative;      /* ☰ の縦センター配置の基準 */
    min-height: 65px;        /* ヘッダー高さ（max-height:65px）に合わせる */
    padding-top: 0!important;
		padding-right: 10px!important;}

	/*追加ここから*/
	/* ハンバーガー（☰）をヘッダー内で縦センター・右端に固定（2026-07-17）
	   旧: float+top:-35pxで無理やり引き上げ→高さとズレていたのを絶対配置の中央揃えに */
	.menu-mobile:after {
		content: '\f0c9';
		font-family: 'FontAwesome';
    font-size: 2.5rem;
    line-height: 1;
    color: #000;
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
	}
	/*＋ 右端・上端固定（floatだと文字数で位置が揺れるため絶対配置 2026-07-17）
	   ※top:50%だとメニュー展開時にliが伸びて中央＝サブメニューの奥に隠れるため上端固定 */
	.menu-dropdown-icon { position: relative; }
	.menu-dropdown-icon:before {
		content: '\f067';
		font-family: 'FontAwesome';
    display: none;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0.6em 1.0em;
    background: #fff;
    color: #333;
    z-index: 2;}
	/* 開いているメニューは右端・上端に「−」（クリックで閉じる） */
	.menu-dropdown-icon.submenu-open:before { content: '\f068'; }

	.menu > ul {
    margin: 0 auto;
    width: 100%!important;
    list-style: none;
    padding: 0!important;
    position: relative;
    box-sizing: border-box;}

	/*追加ここまで*/

    .menu-dropdown-icon:before {
        display: block;
    }
    .menu > ul {
        display: none;
    }
    .menu > ul > li {
        width: 100%!important;
        float: none;
        display: block;
    }
    .menu > ul > li a { font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
        padding: 0.6em!important;/*padding: 1.5em;*/
        width: 100%!important;
        display: block;
    }
    .menu > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul.normal-sub {
        width: 100%!important;
    }
    .menu > ul > li > ul > li {
        float: none;
        width: 100%!important;
        /*margin-top: 20px;*/
				margin-top: 0!important;
    }
    .menu > ul > li > ul > li:first-child {
        margin: 0;
    }
    .menu > ul > li > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul > li > ul > li {
        float: none;
    }
    .menu .show-on-mobile {
        display: block;
    }
}